javascript - react 选择值为 null

Question

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

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

当第一次呈现组件时 task.user_id 为 null 时，select 会正确显示带有值为 '' 的空选项。 .

但是，如果我将值从具有值的值更改回默认选项，服务器端会正确更新，任务对象返回 null对于 task.user_id但选择不会更改为默认值。

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

---

Answer 1

当为你的select组件设置值时，你必须将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)，您将需要更可靠的转换。

See Fiddle here .