React-Redux：如何在组件的单​​独函数中调用表单onSubmit？

Question

我正在尝试在使用Redux Form的React-Redux组件中设置一个函数，该函数将调用表单的onSubmit方法，但是我不确定编写该函数的正确方法，以便onSubmit被正确调用。

到目前为止，我认为正确的方法是创建引用，然后在函数中使用这些引用来引用表单。在下面的表单标记示例中，handleSubmit和Submit已在render中定义。

// example function that should submit form
submitForm = e => {
    const { submit } = this.formRef;
    const { handleSubmit, onSubmit } = this.formRef;
    this.formRef.onSubmit()
  };

// form opening tag
<form className="my-form" ref={this.formRef} onSubmit={handleSubmit(submit)}>

我希望此函数提交表单，但是在这种情况下，它将引发错误，指出“ TypeError：_this.formRef.onSubmit不是函数”。如果使用this.formRef.handleSubmit（），this.formRef.handleSubmit（submit）或this.formref.onSubmit（submit），则会出现相同的错误。在SubmitForm函数中，this.formRef返回一个值，因此我知道引用工作正常。

Answer 1

您的方法是错误的。您需要这样做：

const [inputData, setInputData] = useState('');

changeHandler = e => {
    setInputData(e.target.value)
}

handleSubmit= e => {
    API.sendForm(inputData)
  };

// form opening tag
<form className="my-form">
<input onChange={changeHandler} value={inputData}/>
<button onClick={handleSubmit} value="Submit Form"/>
</form>

如果您更正错误，也许您的示例将起作用：

// add () => 
<form className="my-form" ref={this.formRef} onSubmit={() => handleSubmit(submit)}>