时间戳

首页 > 解决方案 > 表单提交后如何将 react-select 组件重置为 defaultValue 状态

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

问题描述

在下面的代码中，我有一个简单的反应组件，它有一个包含反应选择组件的表单。它最初显示默认值，然后提供两个选项供选择。一旦选择提交按钮将发送一个发布请求。每件事都很好，问题是我想在单击提交后恢复 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>
    );
  }
}

标签： reactjsreact-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
    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 管理它。在提交时，将该 state 重置为初始值，即 0。

推荐阅读