Question

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

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

当第一次渲染组件时task.user_id为null时，选择会正确显示，其中空选项的值为''。

但是，如果我将值从某个值更改回默认选项，服务器端正确更新，则任务对象返回null 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），则需要更强大的转换。

See Fiddle here

Answer 2

我认为你的问题可能是由这一行引起的：

 value={task.user_id}

无论选择什么，选择都将始终显示为值。

如果您的onUserChanged功能正确，您应该在服务器或控制台上看到正确的值，但客户端将始终看到该task.user_id。

否则其他所有内容在您的代码中都是正确的。

React select with value null

2 个答案: