如何在表单提交后将 react-select 组件重置为 defaultValue 状态

Question

在下面的代码中，我有一个简单的 React 组件，它有一个包含 react-select 组件的表单。它最初显示 defaultValue，然后给 select 两个选项。一旦 selected，提交按钮将发送一个 post 请求。一切正常，问题是我想还原 Select 组件以在单击提交后显示默认值。

import Select from 'react-select';

export class Test extends Component {
  this.setState = {
    selection: 0,
   };

  onSelectChange = (e) => {
    this.setState({ selection: e.value });
  }

  onSubmit = (e) => {
    e.preventDefault();
    const { selection } = this.state;
    // Post request logic comes here
    // Reset Select component to original default state
  }

  render() {
    const defaultValue = { label: 'Choose something', value: 0 };
    const options = [
      { label: 'Item 1', value: 1 },
      { label: 'Item 2', value: 2 },
    ];

    return (
      <form onSubmit={this.onSubmit}>
        <Select
          options={options}
          defaultValue={defaultValue}
          onChange={this.onSelectChange}
        />
       //submit button here          
      </form>
    );
  }
}

Answer 1

由于您已经在使用组件状态，因此您只需在 <Select> 组件上添加 value = {this.state.selection} 作为 prop。在你的 post 语句（使用 promise 或 async）之后，执行 this.setState({selection: 0}) 它会将你的 <Select> 重置为值 0.

Answer 2

import Select from 'react-select';

export class Test extends Component {
  this.setState = {
    selection: 0,
   };

  onSelectChange = (e) => {
    this.setState({ selection: e.value });
  }

  onSubmit = (e) => {
    e.preventDefault();
    const { selection } = this.state;
    // Post request logic comes here
    // Reset Select component to original default state
    this.setState({selection: 0});
  }

  render() {

    const options = [
      { label: 'Choose something', value: 0 },
      { label: 'Item 1', value: 1 },
      { label: 'Item 2', value: 2 },
    ];

    return (
      <form onSubmit={this.onSubmit}>
        <Select
          options={options}
          value={this.state.selection}
          onChange={this.onSelectChange}
        />
       //submit button here          
      </form>
    );

使用 value prop 而不是 defaultValue 并通过 state.On 提交管理它，将该状态重置为初始值，即 0。

Answer 3

您也可以使用组件生命周期方法

componentWillReceiveProps(nextProps) {

提交表单后，道具会发生变化

if (this.state.selection === nextProps.value && this.state.selection !== 0) {
  this.setState({ selection: 0 });
}

如何在表单提交后将 react-select 组件重置为 defaultValue 状态

How to reset the react-select component to defaultValue state after form submit

reactjs

react-select