Как отключить поле в массиве полей из компонента? - PullRequest
Новая
       50

Как отключить поле в массиве полей из компонента?

0 голосов
/ 30 апреля 2020

Мне нужно отключить поле в fieldArray, однако я не нашел APi для этого. Я не могу передать переменную в поле как disabled={isDisabled}, потому что я использую массив полей. 

{fields.map((e, i) => (
  <TableRow
    key={i}
    className={classes.row}
    onClick={() => chooseBill(i)}
    style={{ backgroundColor: currentBill == i && '#cff3ff' }}
  >
    <TableCell className="tb-cell">
      <Field
        name={`${e}.condition_related_to`}
        component="input"
        onChange={onChangeForm}
        type="radio"
        value="employment_in"
      />
    </TableCell>
    <TableCell className="tb-cell">
      <Field
        name={`${e}.condition_related_to`}
        component="input"
        onChange={onChangeForm}
        type="radio"
        value="auto_accident_in"
        onClick={() => window.alert('You must fill `state` for auto accident')}
        />
      </TableCell>
      <TableCell className="tb-cell">
        <Field
          name={`${e}.condition_related_to`}
          component="input"
          onChange={changeForm}
          type="radio"
          value="other_accident_in"
        />
      </TableCell>
      <TableCell className="tb-cell" style={{ overflow: 'visible', minWidth: 50 }}>
        <Field
          name={`${e}.accident_place`}
          myStyles={tableSelectStyles}
          onChange={onChangeForm}
          disabled={!isConditionRelatedToDisabled}
          placeholder=""
          component={tableSelect}
          options={[{ label:'NY', value:'NY' }, { label:'NJ', value:'NJ' }, { label:'CT', value:'CT' }, { label:'CT', value:'CT' }]}
        />
      </TableCell>
    </TableRow>
  ))}

Здесь у меня есть поле "accident_place", которое должно быть disabled, если поле "condition_related_to" равно "employment_in".

Ответы [ 3 ]

0 голосов
/ 05 мая 2020

Field Component принимает компонентную опору, которую вы тоже используете. Как я понял из вашего вопроса, вы wi sh отключите поле 

 <Field
      name={`${e}.accident_place`}
      myStyles={tableSelectStyles}
      onChange={onChangeForm}
      disabled={!isConditionRelatedToDisabled}
      placeholder=""
      component={tableSelect}
      options={[{ label:'NY', value:'NY' }, { label:'NJ', value:'NJ' }, { label:'CT', value:'CT' }, { label:'CT', value:'CT' }]}
    />

Теперь добавление disabled prop в input, textarea or select компонент поля напрямую отключит их. Однако, чтобы отключить поле для пользовательского компонента, который в вашем случае равен tableSelect, вам нужно получить disabled Prop в своем компоненте и передать его в поле выбора, которое вы используете 

const tableSelect = ({disabled, options, onChange, onBlur, name, value  ...rest}) => {

    return (
      <select 
         disabled={disabled}
         onChange={onChange}
         name={name}
         value={value}
     >
         {options.map(option => {/* return option here */})}
     </select>
   )

}

Использование отключенной опоры в пользовательском компоненте важно, потому что в противном случае отключенная опора не будет учитываться. Также убедитесь, что если вы используете какую-либо библиотеку для выбора, вы передаете в отключенном реквизите имя, которое требует библиотека

0 голосов
/ 05 мая 2020

Вы можете отключить, что в конечном итоге также отключит.

CSS

disabled
{
  pointer-events: none;
  opacity: 0.5;
  background: #CCC;
}

Реакция 

<TableCell className={`tb-cell ${`${e}.condition_related_to === "employment_in" ? "disabled": ""`}`} style={{ overflow: 'visible', minWidth: 50 }}>
        <Field
          name={`${e}.accident_place`}
          myStyles={tableSelectStyles}
          onChange={onChangeForm}
          placeholder=""
          component={tableSelect}
          options={[{ label:'NY', value:'NY' }, { label:'NJ', value:'NJ' }, { label:'CT', value:'CT' }, { label:'CT', value:'CT' }]}
        />
      </TableCell>

Codesandbox

ИЛИ

Вы можете просто отключить поле с тем же подходом 

<Field
    name={`${e}.accident_place`}
    myStyles={tableSelectStyles}
    onChange={onChangeForm}
    placeholder=""
    component={tableSelect}
    options={[{ label:'NY', value:'NY' }, { label:'NJ', value:'NJ' }, { 
    label:'CT', value:'CT' }, { label:'CT', value:'CT' }]}
    className={`tb-cell ${`${e}.condition_related_to === "employment_in" ? "disabled": 
    ""`}`}
 />
0 голосов
/ 05 мая 2020

Вы можете получить значение элемента в FieldArray, используя fields.get(index) документацию здесь

Таким образом, решение будет выглядеть примерно так (я просто отключил соответствующие части). 

{fields.map((e, i) => (
      ...
        <Field
          name={`${e}.accident_place`}
          disabled={fields.get(i).condition_related_to === 'employment_in'}
          ...
...