反应选择值为null

反应选择值为null

设置选择组件的值时，必须转换

null

为

''

;。当从组件接收值时，您将必须转换

''

为

null

。一个简单的例子：

class Example extends React.Component {    constructor(props) {        super(props);        this.state = { selected: null };    }    render() {        return <div> <select     className="input form-control"     onChange={e => this.setState({ selected: e.target.value || null })}     value={this.state.selected || ''}>     <option value=''></option>     <option value='1'>cook dinner</option>     <option value='2'>do dishes</option>     <option value='3'>walk dog</option> </select> <input type='button' onClick={() => this.setState({ selected: null })} value='Reset' />        </div>    }}

假设您的ID始终是真实的，则此方法有效：

e.target.value ||null

会将所选的空字符串转换为

null

；并且

this.state.selected ||''

将您的转换

null

状态为空字符串。如果您的ID可能为假（例如number

0

），那么您将需要更可靠的转换。

在这里看到小提琴。