这段代码工作正常,因为选项在外面。
import React from 'react';
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
class App extends React.Component {
state = {
selectedOption: null,
};
handleChange = selectedOption => {
this.setState(
{ selectedOption },
() => console.log(`Option selected:`, this.state.selectedOption)
);
};
render() {
return (
<Select
value={this.state.selectedOption}
onChange={this.handleChange}
options={options}
/>
);
}
}
但这段代码不能用,因为选项在状态里面。
import React from 'react';
import Select from 'react-select';
class App extends React.Component {
state = {
options: [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
],
selectedOption: null,
};
handleChange = selectedOption => {
this.setState(
{ selectedOption },
() => console.log(`Option selected:`, this.state.selectedOption)
);
};
render() {
return (
<Select
value={this.state.selectedOption}
onChange={this.handleChange}
options={this.state.options}
/>
);
}
}
如果我使用状态选项,在handleChange里面的控制台日志不返回selectedOption.请告诉我,为什么?我想用这个插件和状态选项一起使用......
替换 options = [
与 options: [
.