Отключить флажок в React, Formik, когда его значение с сервера возвращается false - PullRequest
Новая
       11

Отключить флажок в React, Formik, когда его значение с сервера возвращается false

0 голосов
/ 10 января 2019

У меня есть таблица флажков, которая должна отображаться на основе схемы из API:

Схема следующая: 

  {
    "type": "item1",
    "name": "item1",
    "read": true,
    "write": true
  }

У меня есть компонент флажок, который содержит логику. Смотрите ниже: 

import PropTypes from 'prop-types';
import React from 'react';

import { siblingFieldName } from './utils';

const PermissionsCheckbox = ({
  field: { name, value, onBlur },
  form: { setFieldValue },
  disable = false
}) => (
  <div>
    <input
      name={name}
      type="checkbox"
      value={value}
      checked={value}
      onChange={() => {
        if (name.includes('.write') && value === true) {
          setFieldValue(siblingFieldName(name, 'write'), false);
        }

        if (name.includes('.read') && value === false) {
          setFieldValue(siblingFieldName(name, 'read'), true);
        }
        setFieldValue(name, !value);
      }}
      onBlur={onBlur}
      disable={disable}
    />
  </div>
);

PermissionsCheckbox.propTypes = {
  field: PropTypes.object,
  form: PropTypes.object,
  disable: PropTypes.bool
};

export default PermissionsCheckbox;

В основном компоненте, который отображает таблицу, у меня есть следующая логика. Это отображает таблицу и соответствующие флажки на основе реквизита: 

  renderField = (field, index) => {
    const { keyField } = this.props;
    const { type, name, viewable, writable } = field;
    return (
      <div className="row" key={type}>
        <div className="col-4 my-1">{name}</div>
        {viewable && (
          <div className="col-2 my-1 text-center">
            <Field component={PermissionsCheckbox} name={`${keyField}.${index}.read`} />
          </div>
        )}
        {writable && (
          <div className="col-2 my-1 text-center">
            <Field component={PermissionsCheckbox} name={`${keyField}.${index}.write`} />
          </div>
        )}
      </div>
    );
  };

Я хочу, чтобы последний флажок, который получает значение write: false от API, появился и был отключен.

Ответ от сервера будет следующим: 

  {
    "type": "item5",
    "name": "item5",
    "read": true,
    "write": false
  }

В настоящее время логика говорит, что не отключайте флажок записи, если write: false. Я хочу, чтобы он появился, но был отключен. Я использую Formik для форм.

Я пытался сделать следующее: 

  renderField = (field, index) => {
    const { keyField } = this.props;
    const { type, name, readable, writable, disabled } = field;
    return (
      <div className="row" key={type}>
        <div className="col-4 my-1">{name}</div>
        {readable && (
          <div className="col-2 my-1 text-center">
            <Field component={PermissionsCheckbox} name={`${keyField}.${index}.read`} />
          </div>
        )}
        {writable ? (
          <div className="col-2 my-1 text-center">
            <Field component={PermissionsCheckbox} name={`${keyField}.${index}.write`} />
          </div>
        ) : (
          <div className="col-2 my-1 text-center">
            <Field
              component={PermissionsCheckbox}
              name={`${keyField}.${index}.write`}
              disabled={!disabled}
            />
          </div>
        )}
      </div>
    );
  };

Но это не работает. Он также показывает все флажки, которые можно активировать или отключить в зависимости от значения «отключен». Что я здесь не так делаю ?? Или моя логика неверна?

...