要在React-Select上保留占位符,可以使用以下代码示例。
import React from "react";
import Select from "react-select";
const options = [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'orange', label: 'Orange' }
];
class MySelect extends React.Component {
state = {
selectedOption: null
};
handleChange = selectedOption => {
this.setState({ selectedOption });
};
render() {
const { selectedOption } = this.state;
return (
);
}
}
export default MySelect;
在上面的代码中,MySelect
组件使用react-select
库创建了一个带有占位符的选择框。通过将selectedOption
存储在组件的状态中,可以跟踪当前选择的选项。
要在选择框中保留占位符,将placeholder
属性设置为所需的占位符文本。在上述示例中,占位符文本为"Placeholder Text"。
当用户选择一个选项时,handleChange
方法将被调用,并更新selectedOption
状态以反映所选选项。
您可以在其他组件中使用MySelect
组件,并根据需要自定义选项和占位符文本。
下一篇:保留React组件状态在卸载时