在 React 中重置表单输入值

Question

我想使用 with 创建一个函数，我可以在不提交的情况下重置表单输入中的值。我尝试在应用程序组件（resetFormFields）中创建该函数并将其传递给表单组件。当我想在 onSubmit (e.target.reset()) 上执行此操作时，这很简单，但是当我必须在与表单不同的元素上执行此操作而无需提交时，我陷入了困境。我可以在不将这些值添加到状态的情况下做到这一点吗？

应用程序：

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>
    );
}

形式：

    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> );

Answer 1

onHandleFormSubmit = (e) =>{  
    e.preventDefault();
    e.target.reset();
}