我如何在 react-final-form 中使用多个提交按钮？

Question

我想使用 react-final-form 构建一个具有多个提交按钮的表单，其中每个提交按钮在表单中设置不同的值。本质上，我想创建一个在呈现 HTML:

中看起来像这样的表单

<form>
  Are you over 18 years old?
  <button type="submit">Yes</button>
  <button type="submit">No</button>
</form>

但是，我不知道如何让 react-final-form 将这些不同的提交按钮视为表单中的设置值。我尝试组合组件状态、<input type="hidden"> 和 onClick 处理程序，如下所示：

class FormWithMultipleSubmits extends React.Component {
  state = {
    value: undefined
  };

  setValue = value => this.setState({ value: value });

  render() {
    return (
      <Form>
        Are you over 18 years old?
        <Field
          name="adult"
          component="input"
          type="hidden"
          value={this.state.value}
        />
        <button type="submit" onClick={() => this.setValue(true)}>
          Yes
        </button>
        <button type="submit" onClick={() => this.setValue(false)}>
          No
        </button>
      </Form>
    );
  }
}

然而，这似乎不起作用 -- 可能是因为 the value property on the <Field> component is only used for checkboxes and radio buttons.

有人可以在正确的方向上轻推我，如何正确解决这个问题吗？

Answer 1

这里有一个 Sandbox 说明如何。

我如何在 react-final-form 中使用多个提交按钮？

How do I use multiple submit buttons with react-final-form?

react-final-form

final-form