Forms 提交后如何重置React表单中的select元素？

我有一个表单的React组件，定义如下。表格是“受控”的。提交表单时，我希望将select元素重置为第一个（且为空）选项。我想我可以通过在提交处理程序中调用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;
  }
});

const CreateProgram=React.createClass({
getInitialState:函数（）{
返回{
代理：未定义，
年龄组：未定义，
程序类型：未定义
};
},
render:function（）{
如果（！这个。道具。学校）{
返回false；
}
如果（！this.props.agencies.length）{
返回false；
}
让代理选项=[
].concat（此.props.agencies.map（函数（代理））{
返回{agency.properties.agency}；
}));
让programTypeOptions=[
].concat（此.props.programTypes.map（programType=>{
返回{programType}；
}));
返回(
机构
{代理选项}
年龄组
程序类型
{programTypeOptions}
添加程序
);
},
handleChangeAgency:功能（事件）{
让agencyId=event.target.value；
这是我的国家({
代理：this.props.agencyLookup[agencyId]
});
},
HandleChangeGroup:函数（事件）{
这是我的国家({
年龄组：event.target.value
});
},
handleChangeProgramType:函数（事件）{
这是我的国家({
程序类型：event.target.value
});
},
handleSubmit:函数（事件）{
event.preventDefault（）；
让代理=this.state.agency；
让programType=this.state.programType；
this.props.createProgram（this.props.school、agency、this.state.ageGroup、programType）；
//请尝试重置表单值。由于某些原因，无法重置所选内容
//正在重置。
这是我的国家({
代理：未定义，
年龄组：未定义，
程序类型：未定义
});
},
buttonDisabled:函数（）{
如果（！this.state.agency）{
返回true；
}
如果（！this.state.ageGroup）{
返回true；
}
如果（！this.state.programType）{
返回true；
}
返回false；
}
});

@Omarjmh让我朝着正确的方向开始。虽然我试图将表单控制状态属性设置为

'

，而不是

未定义

，但如果状态属性为false，我真正需要做的是将select元素的值设置为

'

。即:

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

{programTypeOptions}

将它们设置为空字符串，而不是undefined@Omarjmh，我试过了。同样的行为。嗯，好吧，让我仔细看看……你能试试这个吗

this.refs.form.refs.input.setState（{agency:undefined，ageGroup:undefined，programType:undefined}）