[英]How do I reset an email form after submission so that another email can be sent without refreshing the page
[英]How do I reset select elements in a React form after submission?
我有一个表单的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;
}
});
@Omarjmh让我开始朝着正确的方向前进。 虽然我曾尝试将表单控制状态属性设置为''
而不是undefined
,但我真正需要做的是如果状态属性为false,则将select元素的值设置为''
。 那是:
<select className="form-control"
id="program-type"
value={this.state.programType ? this.state.programType : ''}
onChange={this.handleChangeProgramType} ref="programType">
{programTypeOptions}
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.