反应选择值为null

小编典典

反应选择值为null

reactjs

我将以下代码作为我的React组件的一部分：

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

如果在第一次渲染组件时task.user_id为null，则选择将正确显示为带有value的empty选项''。

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

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

阅读 312

2020-07-22

共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可能为假（例如number 0），那么您将需要更可靠的转换。

在这里看到小提琴。

2020-07-22