使用值null反映select

Question

我有以下代码作为我的React组件的一部分:

<select
  className="input form-control"
  onChange={this.onUserChanged}
  value={task.user_id}>
  <option value=''></option>
  {this.renderUserOptions()}
</select>

当第一次呈现组件时task.user_id为null时,将使用带有值的空选项正确显示选择''.

但是,如果我将值从具有值的值更改回默认选项,服务器端正确更新,则任务对象返回nullfor,task.user_id但select不会更改为默认值.

我该怎么办才能处理这种情况？

---

Answer 1

设置选择组件的值时,您必须转换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可能是假的(例如数字0),则需要更强大的转换.

在这里看小提琴.