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

我需要禁用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"。

最佳答案

Field Component也采用了您正在使用的组件prop。据我了解，您希望禁用该字段

 <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道具直接添加到input, textarea or select字段组件将禁用它们。但是，要禁用自定义组件（在您的情况下为tableSelect）的字段，您需要在组件中接收disabled属性并将其传递给您使用的“选择”字段

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

}

在自定义组件中使用禁用的道具非常重要，因为否则将不会兑现禁用的道具。还要确保，如果您正在使用任何库进行选择，则要以库要求的名称传递禁用的道具