ReactSelect V2和V3似乎有几个props，如clearValue,resetValue和setValue。无论我在尝试什么，我都无法以编程方式清除选择。resetValue似乎无法从外部访问。
selectRef.setValue([], 'clear')
// or
selectRef.clearValue()
这不会清除当前选择。
我在这里错过了什么还是还没有完全实施？
如何以编程方式清除/重置 React-Select？
IT技术
javascript
reactjs
react-hooks
react-select
2021-04-18 12:50:21
6个回答
如果您使用的是react-select，您可以尝试传递null给valueprop。
例如：
import React from "react";
import { render } from "react-dom";
import Select from "react-select";
class App extends React.Component {
constructor(props) {
super(props);
const options = [
{ value: "one", label: "One" },
{ value: "two", label: "Two" }
];
this.state = {
select: {
value: options[0], // "One" as initial value for react-select
options // all available options
}
};
}
setValue = value => {
this.setState(prevState => ({
select: {
...prevState.select,
value
}
}));
};
handleChange = value => {
this.setValue(value);
};
handleClick = () => {
this.setValue(null); // here we reset value
};
render() {
const { select } = this.state;
return (
<div>
<p>
<button type="button" onClick={this.handleClick}>
Reset value
</button>
</p>
<Select
name="form-field-name"
value={select.value}
onChange={this.handleChange}
options={select.options}
/>
</div>
);
}
}
render(<App />, document.getElementById("root"));
这是一个工作示例。
我自己遇到了这个问题，并设法通过将 a 传递key给 React-Select 组件来修复它，并将选定的值附加到它。这将ReactSelect在选择更新时强制重新渲染自身。
我希望这可以帮助别人。
import ReactSelect from 'react-select';
...
<ReactSelect
key={`my_unique_select_key__${selected}`}
value={selected || ''}
...
/>
您可以使用 ref 清除 react select 的值。
import React, { useRef } from "react";
import Select from "react-select";
export default function App() {
const selectInputRef = useRef();
const onClear = () => {
selectInputRef.current.select.clearValue();
};
return (
<div className="App">
<h1>Select Gender</h1>
<Select
ref={selectInputRef}
options={[
{ value: "male", label: "Male" },
{ value: "female", label: "Female" }
]}
/>
<button onClick={onClear}>Clear Value</button>
</div>
);
}
这是 CodeSandbox链接
只需将值存储在状态中，然后使用 componentDidUpdate 等以编程方式更改状态...
class Example extends Component {
constructor() {
super()
}
state = {
value: {label: 'Default value', key : '001'}
}
render() {
return(
<Select
...
value={this.state.value}
...
/>
)
)}
注意：'value' 应该是一个对象。
一个简单的选择是传递null给valueprops。
<Select value={null} />