在反应选择中选择选项时,输入值不会改变
问题描述:
我正在使用react-select在我的反应应用程序中定义选择输入控件。这是我如何使用组件:在反应选择中选择选项时,输入值不会改变
<Select
onChange={function(e) {console.log(e)}}
options={[
{value: "sf", label: "San Francisco"},
{value: "nyc", label: "New York City"}
]}
></Select>
之前选择任何选项,我看到一个Select...
占位符的输入值。在选择一个选项后,这不会改变:输入值不会改变,并且Select...
占位符看起来是选定的“选项”。
我如何使用组件有什么问题吗?
答
在state
变量定义Select
值,logChange
函数会返回一个object
,分配一个object
的value
声明变量,它会工作,检查该代码:
class App extends React.Component{
constructor(){
super();
this.state = {value: ''}
}
logChange(val) {
console.log("Selected: " + val.value);
this.setState({value: val.value});
}
render(){
var options = [
{value: 'one', label: 'One' },
{value: 'two', label: 'Two' }
];
return(
<Select
name="form-field-name"
value={this.state.value}
options={options}
onChange={this.logChange.bind(this)}
/>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/classnames/index.js"></script>
<script src="https://unpkg.com/react-input-autosize/dist/react-input-autosize.js"></script>
<script src="https://unpkg.com/react-select/dist/react-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-select/dist/react-select.css">
<div id='app'/>
我接受你的回答,因为它显然有效,但我认为有些东西在那里看起来不正确。为什么我应该成为管理Select组件的内部状态的人?如果Select组件负责在选择一个选项时设置输入值,它不会更有效率吗?除了丑陋之外,不这样做的选择具有性能成本:每当用户选择一个选项时,整个应用程序必须重新呈现(因为全局状态改变)而不是仅重新呈现选择组件。也许有更好的方法? – snakile