ReactJS - флажок Formik SelectAll - PullRequest
Новая
       8

ReactJS - флажок Formik SelectAll

0 голосов
/ 04 июля 2019

Я использую 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>

Я немного растерялся.Я думал о принудительной установке значений с помощью `setFieldValuez от самой Formik, но как и где я мог бы это реализовать.

Проверено онлайн, но на самом деле не нашлось ничего, что помогло бы мне сделать это быстро. Есть ли у вас опыт использования Formik в отношении этой функциональности? Спасибо !!

...