javascript - 在React中重置表单输入值(Reset form input values in React)

Question

I want create a function using with i can reset value in form inputs without submit.(我想创建一个函数，我可以在不提交的情况下重置表单输入中的值。)

I tried create that function in App Component (resetFormFields) and pass it on props to Form Component.(我尝试在App Component（resetFormFields）中创建该函数，然后将其通过props传递给Form Component。) It's preety simply when I want to do this onSubmit (e.target.reset()) but I got stuck when I have to do it without submit, on a different element than the form.(当我想在onSubmit（e.target.reset（））上执行此操作时，这是很可爱的，但是当我必须在不提交的情况下执行此操作时，却陷入了与表单不同的元素上。) Can I do that without adding these values to state?(我可以不添加这些值来声明吗？) App:(应用程式：) class App extends Component { state = { people: [], formMessages: [], person: null }; handleFormSubmit = e => { e.preventDefault(); const form = e.target; const name = form.elements["name"].value; const username = form.elements["username"].value; this.addPerson(name, email); form.reset(); }; resetFormFields = () => { return; } render() { return ( <div className="App"> <Form formSubmit={this.handleFormSubmit} reset={this.resetFormFields} /> </div> ); } Form:(形成：) const Form = props => ( <form className={classes.Form} id="form" onSubmit={props.formSubmit}> <input autoFocus id="name" type="text" defaultValue="" placeholder="Name..." /> <input id="email" type="text" defaultValue="" placeholder="Email..." /> <Button btnType="Submit" form="form" type='submit'> Submit </Button> <label onClick={props.reset}>Reset fields</label> </form> );   ask by sosick translate from so

Answer 1

You need to make your inputs controlled by passing the value you store in your state then you just have to reset the state values and your component value resets.(您需要通过传递存储在state的值来控制输入，然后只需重置状态值，然后重置组件值即可。)

check this sample below(在下面检查此样本) handleInputChange = (e) => { let { name, value } = e.target; this.setState({ ...this.state, inputs: { [name]: value } }); }(}) your component will now look like(您的组件现在看起来像) <input name='fullName' value={this.state.inputs.fullName} onChange={this.handleInputChange} /> Your reset function will just clear the state and your input field will be empty since it's controlled via state(您的重置功能只会清除状态，并且您的输入字段为空，因为它是通过state控制的) resetInputFields = () => { this.setState({ inputs: {} }) }