答案取决于您的输入是 受控 还是 不受控制 。如果不确定或需要更多信息，请查看官方文档对
受控组件 和非
受控组件的评论 。 感谢 @ Dan-Esparza 提供的链接。
另外，请注意 不建议 在ref
中 使用字符串文字 。请改用标准回调方法。
清除具有不受控制的字段的表单
您可以清除整个表单，而不是分别清除每个表单字段。
cancelCourse = () => { document.getElementById("create-course-form").reset();}render() { return ( <form id="create-course-form"> <input /> <input /> ... <input /> </form> );}如果您的表单没有
id属性，则也可以使用
ref：
cancelCourse = () => { this.myFormRef.reset();}render() { return ( <form ref={(el) => this.myFormRef = el;}> <input /> <input /> ... <input /> </form> );}清除具有受控字段的表单
如果使用受控表单字段，则可能必须显式重置表单中的每个组件，具体取决于状态中值的存储方式。
如果分别声明它们，则需要显式地重设每个：
cancelCourse = () => { this.setState({ inputVal_1: "", inputVal_2: "", ... inputVal_n: "", });}render() { return ( <input value={this.state.inputVal_1} onChange={this.handleInput1Change}> <input value={this.state.inputVal_2} onChange={this.handleInput2Change}> ... <input value={this.state.inputVal_n} onChange={this.handleInputnChange}> );}下面的演示：
class MyApp extends React.Component { constructor() { super(); this.state = { inputVal_1: "", inputVal_2: "", inputVal_3: "", inputVal_4: "", inputVal_5: "", inputVal_6: "", inputVal_7: "", inputVal_8: "", inputVal_9: "", inputVal_10: "" }; } handleInput1Change = (e) => { this.setState({inputVal_1: e.target.value}); } handleInput2Change = (e) => { this.setState({inputVal_2: e.target.value}); } handleInput3Change = (e) => { this.setState({inputVal_3: e.target.value}); } handleInput4Change = (e) => { this.setState({inputVal_4: e.target.value}); } handleInput5Change = (e) => { this.setState({inputVal_5: e.target.value}); } handleInput6Change = (e) => { this.setState({inputVal_6: e.target.value}); } handleInput7Change = (e) => { this.setState({inputVal_7: e.target.value}); } handleInput8Change = (e) => { this.setState({inputVal_8: e.target.value}); } handleInput9Change = (e) => { this.setState({inputVal_9: e.target.value}); } handleInput10Change = (e) => { this.setState({inputVal_10: e.target.value}); } cancelCourse = () => { this.setState({ inputVal_1: "", inputVal_2: "", inputVal_3: "", inputVal_4: "", inputVal_5: "", inputVal_6: "", inputVal_7: "", inputVal_8: "", inputVal_9: "", inputVal_10: "" }); } render() { return ( <form> <input value={this.state.inputVal_1} onChange={this.handleInput1Change} /> <input value={this.state.inputVal_2} onChange={this.handleInput2Change} /> <input value={this.state.inputVal_3} onChange={this.handleInput3Change} /> <input value={this.state.inputVal_4} onChange={this.handleInput4Change} /> <input value={this.state.inputVal_5} onChange={this.handleInput5Change} /> <input value={this.state.inputVal_6} onChange={this.handleInput6Change} /> <input value={this.state.inputVal_7} onChange={this.handleInput7Change} /> <input value={this.state.inputVal_8} onChange={this.handleInput8Change} /> <input value={this.state.inputVal_9} onChange={this.handleInput9Change} /> <input value={this.state.inputVal_10} onChange={this.handleInput10Change} /> <input type="submit" name="saveCourse" value="Create" /> <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse} /> </form> ); }}ReactDOM.render(<MyApp />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="app"></div>不过，有一种更干净的方法可以做到这一点。与其具有
n状态属性和
n事件处理程序，不为每个输入一个，而是使用一些巧妙的编码，我们可以极大地减少代码。
在构造函数中，我们只声明一个空对象，该对象将用于保存输入值。我们仅使用一个输入处理程序，并将要更改其值的输入元素的索引传递给它。这意味着，当我们开始输入单个输入的值时，便会生成该值。
要重置表单，我们只需要将输入对象重新设置为空即可。
输入值为
this.state.inputVal[i]。如果
i不存在（我们尚未在该输入中键入任何内容），我们希望该值是一个空字符串（而不是null）。
cancelCourse = () => { this.setState({inputVal: {}});}render() { return ( <form> {[...Array(n)].map( (item, i) => <input value={this.state.inputVal[i] || ""} onChange={this.handleInputChange.bind(this, i)} /> )} </form> );}下面的演示：
class MyApp extends React.Component { constructor() { super(); this.state = { inputVal: {} }; } handleInputChange = (idx, {target}) => { this.setState(({inputVal}) => { inputVal[idx] = target.value; return inputVal; }); } cancelCourse = () => { this.setState({inputVal: {}}); } render() { return( <form> {[...Array(10)].map( //create an array with a length of 10 (item, i) => <input value={this.state.inputVal[i] || ""} onChange={this.handleInputChange.bind(this, i)} /> //bind the index to the input handler )} <input type="submit" name="saveCourse" value="Create" /> <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse} /> </form> ); }}ReactDOM.render(<MyApp />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="app"></div>
