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

通过指定value字段，每次调用渲染函数时都会重新分配值。请改用defaultValue。

LE：可能值得一读有关受控制和不受控制的组件：https://facebook.github.io/react/docs/forms.html

Answer 2

你的根本问题是你实际上没有一个组件在你的代码中做任何事情，所以选择只是使用你在开头设置的静态道具进行渲染。

正如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

选定的州没有保留新选择的选项

2 个答案: