React-Redux: Как вызвать форму onSubmit в отдельной функции в компоненте?

Question

Я пытаюсь настроить функцию внутри компонента React-Redux, который использует Redux Form, который будет вызывать метод 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)}>