React 最终形式 - 双条件形式

Question

我已经开始使用 React final form 做一个表单项目，但是我正在努力做一个有两个条件的问题。

有谁知道如何在 React 最终形式上执行双重条件逻辑。由此example，给出单条件逻辑代码：

const Condition = ({ when, is, children }) => ( <Field name={when} subscription={{ value: true }}>
{({ input: { value } }) => (value === is ? children : null)}  </Field>)

但是，我不知道如何做一个双条件问题，它需要在显示条件问题之前检查表单中两个不同问题的 2 个不同答案。

谢谢:)

Answer 1

您可以使用 react-final-form 中的 useFormState 来获取当前表单状态，因此 MultiCondition 组件可能如下所示：

const MultiCondition = ({ condition, children }) => {
  const { values = {} } = useFormState({ subscription: { values: true } });
  return condition(values) ? children : null;
};

比表格内的某处：

<MultiCondition condition={({ gift, firstName }) => gift && firstName === "Joe"}>
  <span>gets rendered when condition is satisfied</span>
</MultiCondition>

React 最终形式 - 双条件形式

React Final Form - Double conditional Form

javascript

reactjs

forms

react-final-form