React中点击取消按钮重置表单下拉框状态问题求助

It sounds like your cancel button's reset functionality is misbehaving due to a couple of small issues in your state setup and clear function. Let's get this sorted out step by step.

Key Problems in Your Current Code #

• Your initial state uses empty strings ('') instead of matching the value of your "select" default dropdown option.
• There's a typo in your clearValues method (last instead of second) that's likely causing incomplete state updates, leading to null values after repeated clicks.
• Your dropdowns might not be properly bound to the state as controlled components.

Step-by-Step Fixes #

1. Align Initial State with Default Dropdown Values #

First, make sure your component's initial state matches the value of your dropdown's default "select" option. For example, if your dropdown looks like this:

<select>
  <option value="select">Select an option</option>
  {/* Other options */}
</select>

Set your initial state to use 'select' instead of empty strings:

constructor(props) {
  super(props);
  this.state = {
    result: {
      first: 'select', // Matches default option value
      second: 'select' // Matches default option value
    }
  };
  this.clearValues = this.clearValues.bind(this);
}

2. Fix the clearValues Method #

Correct the typo and ensure you're resetting both dropdown values to their initial state:

clearValues() {
  this.setState({
    result: {
      first: 'select',
      second: 'select' // Fixed from 'last' to 'second'
    }
  });
}

3. Ensure Dropdowns Are Controlled Components #

Make sure each dropdown is bound to your state so that when the state resets, the dropdowns update automatically. Here's how to set them up:

// Add an onChange handler to update state when dropdowns change
handleDropdownChange(e) {
  const { name, value } = e.target;
  this.setState(prevState => ({
    result: {
      ...prevState.result,
      [name]: value
    }
  }));
}

// In your render method:
<select
  name="first"
  value={this.state.result.first}
  onChange={this.handleDropdownChange}
>
  <option value="select">Select first option</option>
  <option value="opt1">Option 1</option>
  <option value="opt2">Option 2</option>
</select>

<select
  name="second"
  value={this.state.result.second}
  onChange={this.handleDropdownChange}
>
  <option value="select">Select second option</option>
  <option value="optA">Option A</option>
  <option value="optB">Option B</option>
</select>

Full Corrected Component Example #

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      result: {
        first: 'select',
        second: 'select'
      }
    };
    this.clearValues = this.clearValues.bind(this);
    this.handleDropdownChange = this.handleDropdownChange.bind(this);
  }

  handleDropdownChange(e) {
    const { name, value } = e.target;
    this.setState(prevState => ({
      result: {
        ...prevState.result,
        [name]: value
      }
    }));
  }

  clearValues() {
    this.setState({
      result: {
        first: 'select',
        second: 'select'
      }
    });
  }

  render() {
    return (
      <form>
        <select
          name="first"
          value={this.state.result.first}
          onChange={this.handleDropdownChange}
        >
          <option value="select">Select first option</option>
          <option value="opt1">Option 1</option>
          <option value="opt2">Option 2</option>
        </select>

        <select
          name="second"
          value={this.state.result.second}
          onChange={this.handleDropdownChange}
        >
          <option value="select">Select second option</option>
          <option value="optA">Option A</option>
          <option value="optB">Option B</option>
        </select>

        <button type="submit">Submit</button>
        <button type="button" onClick={this.clearValues}>Cancel</button>
      </form>
    );
  }
}

Notes #

• If your default dropdown option uses a different value (like an empty string <option value="">Select</option>), adjust the initial state and clearValues method to use '' instead of 'select'.
• Using functional updates (prevState => ...) in handleDropdownChange ensures you're always updating the latest state, which prevents race conditions.

内容的提问来源于stack exchange，提问作者Yaswanth