如何从组件中禁用字段数组中的字段？

Question

我需要禁用 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" 如果字段 "condition_related_to" 等于 "employment_in"，则它必须是 disabled。

Answer 1

您可以使用 fields.get(index) documentation here

获取 FieldArray 中项目的值

所以解决方案看起来像这样（我只是删掉了不相关的部分）。

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

Answer 2

Field Component 接收您正在使用的组件道具。根据您的问题，我了解到您希望禁用该字段

 <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' }]}
    />

现在直接向 input, textarea or select 字段组件添加 disabled 道具将禁用它们。但是，为了禁用自定义组件的字段（在您的情况下为 tableSelect，您需要在组件中接收 disabled Prop 并将其传递给您设置的 Select 字段使用

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>
   )

}

在自定义组件中使用 disabled 属性很重要，否则 disabled 属性将无法使用。还要确保如果你正在为 select 使用任何库，你将通过库需要的名称传递 disabled 属性

Answer 3

您可以禁用最终也会禁用。

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": 
    ""`}`}
 />

如何从组件中禁用字段数组中的字段？

How to disable field in field array from component?

reactjs

redux-form