Javascript 使用值为 null 的反应选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36187522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React select with value null
提问by kolrie
I have the following code as part of my React component:
我的 React 组件中有以下代码：
<select
className="input form-control"
onChange={this.onUserChanged}
value={task.user_id}>
<option value=''></option>
{this.renderUserOptions()}
</select>
When the task.user_id is null on the first rendering of the component, the select is properly displayed with the empty option with value ''.
当 task.user_id 在组件的第一次渲染时为 null 时，选择正确显示为空选项和 value ''。
However, if I change the value from something that has a value back to the default option, the server side updates correctly, the task object returns the nullfor task.user_idbut the select doesn't change to the default value.
但是，如果我将值从具有值的值更改回默认选项，服务器端会正确更新，任务对象返回nullfortask.user_id但选择不会更改为默认值。
What should I do to handle this scenario?
我应该怎么做来处理这种情况？
回答by iaretiga
When setting the value for your select component, you will have to convert nullto ''; and when receiving the value from your component, you will have to convert ''to null. A simple example:
为您的选择组件设置值时，您必须转换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>
}
}
This works assuming that your ids are always truthy: e.target.value || nullwill convert the selected empty string to null; and this.state.selected || ''will convert your nullstate to an empty string. If your ids can be falsey (for example the number 0), you will need a more robust conversion.
假设您的 id 始终为真，这e.target.value || null将起作用：将选定的空字符串转换为null; 并且this.state.selected || ''将您的转换null状态为空字符串。如果您的 id 可能是假的（例如 number 0），您将需要更强大的转换。
回答by Theo
I think your problem might be caused by this line:
我认为您的问题可能是由这一行引起的：
value={task.user_id}
The select will always show that as a value regardless of what was selected.
无论选择了什么，选择将始终显示为一个值。
If your onUserChanged function is right you should see the right value in being selected on the server or on the console, but the client will always see that task.user_id.
如果您的 onUserChanged 函数是正确的，您应该会在服务器或控制台上看到正确的值，但客户端将始终看到该 task.user_id。
Otherwise everything else seems right in your code.
否则，您的代码中的其他一切似乎都是正确的。
