使用值null反映select

问题描述 投票:11回答:2

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

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

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

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

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


javascript reactjs
2个回答
30
投票

设置选择组件的值时,您必须将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


0
投票

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

 value={task.user_id}

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

如果你的onUserChanged函数是正确的,你应该在服务器或控制台上看到正确的值,但客户端将始终看到task.user_id。

否则其他一切似乎都在您的代码中。

© www.soinside.com 2019 - 2024. All rights reserved.