我有以下代码作为我的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不会更改为默认值。
我该怎么办才能处理这种情况?
设置选择组件的值时,您必须将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
),则需要更强大的转换。
我认为你的问题可能是由这一行引起的:
value={task.user_id}
无论选择什么,select都将始终显示为值。
如果你的onUserChanged函数是正确的,你应该在服务器或控制台上看到正确的值,但客户端将始终看到task.user_id。
否则其他一切似乎都在您的代码中。