forms - 提交后如何重置 React 表单中的选择元素？

Question

我有一个用于表单的 React 组件，定义如下。形式是“受控的”。提交表单后，我想将选择元素重置为第一个(空)选项。我认为我可以通过在提交处理程序中调用 setState() 来做到这一点。虽然这会导致组件重新渲染，但选择元素中先前选择的选项仍保持选中状态。

const CreateProgram = React.createClass({
  getInitialState: function() {
    return {
      agency: undefined,
      ageGroup: undefined,
      programType: undefined
    };
  },

  render: function() {
    if (!this.props.school) {
      return false;
    }

    if (!this.props.agencies.length) {
      return false;
    }

    let agencyOptions = [
      <option value="" key=""></option>
    ].concat(this.props.agencies.map(function(agency) {
      return <option value={agency.properties.slug} key={agency.properties.slug}>{agency.properties.agency}</option>;
    }));

    let programTypeOptions = [
      <option value="" key=""></option>
    ].concat(this.props.programTypes.map(programType => {
      return <option value={programType} key={programType}>{programType}</option>;
    }));

    return (
      <form className="create-program" onSubmit={this.handleSubmit}>
        <fieldset className="form-group">
          <label htmlFor="agency">Agency</label>
          <select className="form-control" id="agency" value={this.state.agency ? this.state.agency.properties.slug : undefined} onChange={this.handleChangeAgency} ref="agency">
            {agencyOptions}
          </select>
        </fieldset>
        <fieldset className="form-group">
          <label htmlFor="age-group">Age Group</label>
          <input type="text"
                 id="age-group"
                 className="form-control"
                 placeholder="Example: 6th Grade, Grades 9-12"
                 value={this.state.ageGroup}
                 onChange={this.handleChangeAgeGroup} />
        </fieldset>
        <fieldset className="form-group">
          <label htmlFor="program-type">Program Type</label>
          <select className="form-control" id="program-type" value={this.state.programType} onChange={this.handleChangeProgramType} ref="programType">
            {programTypeOptions}
          </select>
        </fieldset>
        <button type="submit" className="btn btn-primary" disabled={this.buttonDisabled()}>Add Program</button>
      </form>
    );
  },

  handleChangeAgency: function(event) {
    let agencyId = event.target.value;

    this.setState({
      agency: this.props.agencyLookup[agencyId]
    });
  },

  handleChangeAgeGroup: function(event) {
    this.setState({
      ageGroup: event.target.value
    });
  },

  handleChangeProgramType: function(event) {
    this.setState({
      programType: event.target.value
    });
  },

  handleSubmit: function(event) {
    event.preventDefault();

    let agency = this.state.agency;
    let programType = this.state.programType;

    this.props.createProgram(this.props.school, agency, this.state.ageGroup, programType);

    // Try to reset the form values.  For some reason, the selects aren't
    // getting reset.
    this.setState({
      agency: undefined,
      ageGroup: undefined,
      programType: undefined 
    });
  },

  buttonDisabled: function() {
    if (!this.state.agency) {
      return true;
    }

    if (!this.state.ageGroup) {
      return true;
    }

    if (!this.state.programType) {
      return true;
    }

    return false;
  }
});

Answer 1

@Omarjmh 让我朝着正确的方向开始。虽然我尝试将表单控制状态属性设置为 '' 而不是 undefined，但我真正需要做的是将选择元素的值设置为 '' 如果状态属性为 false。即:

<select className="form-control" 
        id="program-type" 
        value={this.state.programType ? this.state.programType : ''}
        onChange={this.handleChangeProgramType} ref="programType">
  {programTypeOptions}
</select>