Question

我在表格中使用Formik。我有一组对象，这些对象来自服务器，结构如下：

      {
        "name": "Screen1",
        "viewable": {
          "permission": "ViewScreen1",
          "checked": true
        },
        "manageable": {
          "permission": "ViewScreen2",
          "checked": false
        }
      },
      ...moreObjectsHere

我通过它们进行映射，以便为每个带有2个复选框的屏幕创建一个列表。

  renderField(field, index) {
    const { keyField } = this.props;
    const { name, viewable, manageable } = field;

    return (
      <div className="row" key={hash({ ...field, index })}>
        <div className='col-4'>
          {name}
        </div>
        <div className="col-2 text-center">
          {viewable && (
            <Fragment>
              {
                <Field
                  component={PermissionsCheckbox}
                  name={`${keyField}.${index}.viewable.checked`}
                  disabled={!viewable}
                />
              }
            </Fragment>
          )}
        </div>
        <div className="col-2 text-center">
          {manageable && (
            <Fragment>
              {
                <Field
                  component={PermissionsCheckbox}
                  name={`${keyField}.${index}.manageable.checked`}
                  disabled={!manageable}
                />
              }
            </Fragment>
          )}
        </div>
      </div>
    );
  }

  render() {
    const { dto, keyField, mode } = this.props;
    return (
      <Fragment>
        <div className="row">
          <div className="col-2 offset-4 text-center">
            <h6 className="font-weight-bold">View</h6>
          </div>
          <div className="col-2 text-center">
            <h6 className="font-weight-bold">Manage</h6>
          </div>
        </div>
        <FieldArray
          render={() => dto[keyField].map((field, index) => this.renderField(field, index))}
        />
      </Fragment>
    );
  }

这将显示带有2个复选框的项目列表，以及“查看”和“管理选项”。表单运行正常，意味着它可以按需提交和更改。

现在，我想实现此功能。 为选择所有视图或管理单个复选框添加另一行。

这是该代码的呈现代码：

  renderSelectAll = () => (
    <div className="row">
      <div className="col-4 my-2 font-weight-medium">Select All</div>
      <div className="col-2 text-center">
        <Field
          component={PermissionsCheckbox}
          name="permission-set-1"
        />
      </div>
      <div className="col-2 text-center">
        <Field component={PermissionsCheckbox} name="permission-set-2" />
      </div>
    </div>
  );

我像这样呼叫主render()：

          <Fragment>
            <div className="border-top my-2 w-75" />
            {this.renderSelectAll()}
          </Fragment>

我有点不知所措。我当时正在考虑使用Formik本身的`setFieldValuez强制设置值，但是我将在哪里实现该方法。

在线检查，但实际上没有发现任何可以帮助我快速完成此任务的东西。 您对Formik有任何使用此功能的经验吗？谢谢！

ReactJS-Formik SelectAll复选框

0 个答案: