javascript - 选定状态不保留新选定的选项

Question

操作系统: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 行，则选择框将按预期运行。

这里有什么问题？

Answer 1

您的根本问题是您实际上没有组件在代码中执行任何操作，因此 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