React final form - 单击单选按钮提交向导表单答案

【问题标题】：React final form - submit a wizard form on click of a radio buttonReact final form - 单击单选按钮提交向导表单
【发布时间】：2020-06-08 20:12:27
【问题描述】：

我想通过单击单选按钮而不是经典的提交按钮来提交向导表单的步骤。

无线电组件：

const Radio = ({ input, children }) => (
  <label className="form-radio city">
    <input {...input} />
    <span className="radio-text">{children}</span>
  </label>
)

我的班级：

<ProfileForm.Page>
   {CITIES.map(({ name }) => (
       <Field component={Radio} type="radio" name="city" key={name} value={name}>
           {name}
        </Field>
   ))}
   <button type="submit"></button>
 </ProfileForm.Page>

这在我使用提交按钮时有效，但我想删除它并直接单击单选按钮提交城市。

【问题讨论】：

你不能在单选按钮上添加一个 onChange 事件并从那里触发提交吗？
你好，我在下面回答你，谢谢你的帮助:)
@gui35 - 下面没有答案。不要让达米尼等待。使用结果更新（编辑）您的问题。
@Kevin Buchs - 我的问题没有解决，我的代码增加了精度

标签： javascript reactjs final-form

【解决方案1】：

我尝试使用“this.form.submit()”进行 onChange 事件，但我无法加入“form”。

我有一个父组件 ProfileForm.jsx ：

 <Form validate={this.validate} onSubmit={this.handleSubmit} initialValues={values}>
    {({ handleSubmit, invalid, pristine, values }) => (
        <form onSubmit={handleSubmit}>
            {activePage}   
        </form>
    )}
 </Form>

我的单选按钮位于“活动页面”City.jsx上，其中包含我的第一篇文章的代码

【讨论】：

尝试将表单作为道具传递？如果你有 onChange 我可以看到这两个组件的代码:)