Question

在下面的代码中，我有一个简单的react组件，该组件具有包含react-select组件的形式。它最初显示defaultValue，然后提供两个选项供选择。选择后，提交按钮将发送发布请求。一切正常，问题是我想还原“选择”组件以在单击“提交”后显示默认值。

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

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>
    );

使用值prop代替defaultValue并通过状态进行管理。在提交时，将该状态重置为初始值，即0。

Answer 2

由于您已经在使用组件状态，因此您要做的就是在value = {this.state.selection}组件上添加<Select>作为道具。发表声明后（使用promise或async），执行this.setState({selection: 0})，它将<Select>重置为0。

Answer 3

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

componentWillReceiveProps(nextProps) {

提交表格后，道具将会更改

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

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

3 个答案: