React 最终表单在初始渲染后触发 handleSubmit

【问题标题】：React final form triggers handleSubmit after the initial renderReact 最终表单在初始渲染后触发 handleSubmit
【发布时间】：2020-01-22 08:42:48
【问题描述】：

我的 react-final-form 中只有 Switch 组件。它看起来像这样：

<Form
  onSubmit={onSubmit}
  initialValues={initialValues}
  render={({ handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      <Field name="booleanValue" component={Switch} onChange={handleSubmit}/> //triggers when receives value
    </form>
   )
  }
/>

我只想在用户更改后触发 handleSubmit，而不是在第一次呈现表单时触发。

【问题讨论】：

标签： reactjs react-final-form

【解决方案1】：

<Field/> 没有像您正在尝试的 onChange 道具。像这样的东西可以工作。

import { OnChange } from 'react-final-form-listeners'

...

<Form
  onSubmit={onSubmit}
  initialValues={initialValues}
  render={({ handleSubmit, form }) => (
    <form onSubmit={handleSubmit}>
      <Field name="booleanValue" component={Switch}/>
      <OnChange name="booleanValue">
        {(value, previousValue) => {
          form.submit()
        }}
      </OnChange>
    </form>
   )
  }
/>

附：我希望你的Switch 组件知道从input 属性中获取它的value 和onChange。

希望有帮助！

【讨论】：