我使用react-select并且是新手。我有一个名为Example的组件,可以正确执行handleChange方法
const colourOptions = [
{ value: '1', label: '1', color: '#00B8D9' },
{ value: '2', label: '2', color: '#0052CC' },
{ value: '3', label: '3', color: '#5243AA' },
];
class Example extends React.Component {
state = {
selectedOption: null,
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(selectedOption)
}
render() {
const { selectedOption } = this.state;
return (
<Select
value={selectedOption}
onChange={this.handleChange}
options={colourOptions}
/>
);
}
}
export default Example;
在另一个文件中,我们有一个按钮
export default function UserProfile() {
return (
<div>
<Example1/>
<Example2/>
<Example3/>
<Button type="Submit">Search</Button>
</div>
);
}
如何通过单击按钮来显示selectedOption的值?
正确的方法是在parent(UserProfile)中保留selectedOption和handleChange并将它们传递给子级(示例)。
UserProfile组件
export default function UserProfile() {
const [selectedOption, setSelectedOption] = useState({});
const handleChange = (selectedOption) => {
setSelectedOption(selectedOption)
console.log(selectedOption)
};
const handleClick = () => {
console.log(selectedOption);
};
return (
<div>
<Example onHandleChange={handleChange} selectedOption={selectedOption}/>
<Button onClick={handleClick} type="Submit">Search</Button>
</div>
);
}
示例组件
class Example extends React.Component {
render() {
const { selectedOption, onHandleChange } = this.props;
return (
<Select
value={selectedOption}
onChange={onHandleChange}
options={colourOptions}
/>
);
}
}
export default Example;