ReactSelect V2(ベータ5)には、clearValue
、resetValue
、およびsetValue
などの小道具がいくつかあるようです。何をしようとしても、プログラムで選択をクリアすることはできません。 resetValue
は外部からアクセスできないようです。
selectRef.setValue([], 'clear')
// or
selectRef.clearValue()
これは現在の選択をクリアしません。
ここで何かを見逃していますか、それともまだ完全に実装されていませんか?
react-select を使用している場合、null
をvalue
propに渡すことができます。
例えば:
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"));
ここにあります これの実例です。
私は自分でこの問題に遭遇し、key
をReact-Selectコンポーネントに渡して、選択した値を追加することでそれを修正しました。これにより、選択が更新されたときにReactSelect
が強制的に再レンダリングされます。
これが誰かの助けになることを願っています。
import ReactSelect from 'react-select';
...
<ReactSelect
key={`my_unique_select_key__${selected}`}
value={selected || ''}
...
/>
値を状態に保存し、componentDidUpdateなどを使用してプログラムで状態を変更するだけです。
class Example extends Component {
constructor() {
super()
}
state = {
value: {label: 'Default value', key : '001'}
}
render() {
return(
<Select
...
value={this.state.value}
...
/>
)
)}
注:「値」はオブジェクトでなければなりません。
それが誰かを助ける場合、これは私の解決策です:状態を初期値に戻すことにより、選択した値をクリアするボタンを作成しました。
<button onClick={() => this.clearFilters()} >Clear</button>
clearFilters(){
this.setState({ startTime: null })
}
以下の完全なコードサンプル:
import React from "react"
import Select from 'react-select';
const timeSlots = [
{ value: '8:00', label: '8:00' },
{ value: '9:00', label: '9:00' },
{ value: '10:00', label: '10:00' },
]
class Filter extends React.Component {
constructor(){
super();
this.state = {
startTime: null,
}
}
startTime = (selectedTime) => {
this.setState({ startTime: selectedTime });
}
clearFilters(){
this.setState({
startTime: null,
})
}
render(){
const { startTime } = this.state;
return(
<div>
<button onClick={() => this.clearFilters()} >Clear</button>
<Select
value={startTime}
onChange={this.startTime}
options={timeSlots}
placeholder='Start time'
/>
</div>
)
}
}
export default Filter
[React Developers]パネルで[コンポーネントの選択]をチェックすると、別のステートマネージャーにラップされていることがわかります。つまり、refは基本的にはState Managerへの参照ですが、Select自体への参照ではありません。
幸いなことに、StateManagerには状態があり、必要なものに設定できる値オブジェクトがあります。
たとえば(これは私のプロジェクトのもので、resetGroupはDOMのボタンにアタッチするonClickハンドラーです):
<Select onChange={this.handleGroupSelect}
options={this.state.groupsName.map(group =>
({ label: group, value: group }) )}
instanceId="groupselect"
className='group-select-container'
classNamePrefix="select"
placeholder={this.context.t("Введите название")}
ref={c => (this.groupSelect = c)}
/>
resetGroup = (e) => {
e.preventDefault()
this.setState({
selectedGroupName: ""
})
this.groupSelect.state.value.value = ""
this.groupSelect.state.value.label = this.context.t("Введите название")
}
単純なオプションは、null
をvalue
プロップに渡すことです。
<Select value={null} />