操作系统:Windows 10 专业版 浏览器:Opera
所以,我遇到的问题是,当使用 onChange() 进行选择时,所选选项将立即显示(返回)到其先前选择的选项状态。
因此,使用以下代码:
cont options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
class funcName extends React.Component {
render() {
return (
logChange = (val) => {
console.log("Selected: " + val);
}
<Select
name="form-field-name"
value="one"
options={options}
onChange={logChange}
/>
);
}
}
永远不会保留尝试选择选项“二”的行为。选择完成后,它会立即返回到选择选项“One”,并且 (val) 的显示值始终为“One”。如果我注释掉 onChange 行,则选择框将按预期运行。
这里有什么问题?
最佳答案
您的根本问题是您实际上没有组件在代码中执行任何操作,因此 Select 只是使用您在开始时设置的静态 Prop 进行渲染。
正如 Alex 所说,您需要更新发送到 Select 组件的 value
属性,以便其以可视方式更新。在非常基本的层面上,您可以通过在父组件(您在示例中未创建)上调用 setState 来执行此操作,并将该值传递给子 Select 组件。
<Select
name="form-field-name"
value={this.state.selection.value}
options={options}
onChange={this.changeSelection}
/>
我已在此处更新了您的代码以获取完整的工作示例:https://plnkr.co/edit/TlUe2eJd3OSxGkdHIKJP?p=preview
关于javascript - 选定状态不保留新选定的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41047770/