在其他字段中删除基于 React Formik 复选框条件的值

Question

我正在使用 react-formik 表单我有一个基于复选框的条件问题，如果用户选中隐藏字段则显示与另外两个字段的检查关系否则它是隐藏的，用户取消选中其余两个包含值，但我希望用户取消选中所有字段为空。

我的代码：

感谢帮助

Answer 1

当你想根据其他字段的值来控制一个字段的值时，你可以使用 Formik 提供的 setFieldValue。

Field 组件有一个 render prop，它是一个函数，可以帮助我们访问其参数中的 setFieldValue。现在可以访问 setFieldValue，您可以使用它在选中或取消选中复选框时设置依赖字段的值。

您需要为您的复选框渲染 Field 组件，如下所示

<Field
  name="airconditioning"
  render={({ meta, form }) => {
    return (
      <Checkbox
        checked={meta.value}
        onChange={(e) => {
          const { checked } = e.target;
          if (!checked) {
            form.setFieldValue("airconditioningType", "");
            form.setFieldValue("airconditioningStarred", "");
          }
          form.setFieldValue("airconditioning", checked || "");
        }}
        name="checkedB"
        color="primary"
      />
    );
  }}
/>

Working Sandbox

在其他字段中删除基于 React Formik 复选框条件的值

React Formik checkbox condition based value remove in other Fields

javascript

reactjs

formik