按下插入项目按钮时如何启用redux-form字段数组中的禁用字段？

Question

我有一个 redux 表单，它有 3 个字段，其中 2 个字段无法编辑（在 redux-forms 中使用 fieldarrays）。因此，这些字段在编辑模式下被禁用。但是，当添加新项目时，表单中会出现与我添加 disabled={true} 相同的禁用字段。使用 redux-form fieldarray 中的 add new 按钮添加新项目时，如何删除字段的禁用状态？我已经关注了redux form fieldarray 的例子。

这是为表单编写的代码。

import React, { Component } from 'react';
import { Field, FieldArray, reduxForm } from 'redux-form';
import _ from 'lodash';

import renderTextField from './CustomTextField';
import 'bootstrap/dist/css/bootstrap.min.css';
import history from '../../../../services/history';

const renderUnitOfMeasures = unitOfMeasures => (
   <option key={`${unitOfMeasures.id}`} value={unitOfMeasures.id}> 
{unitOfMeasures.name}</option>
)

const renderAllNutritions = allNutritions => (
  <option key={`${allNutritions.id}`} value={allNutritions.id}> 
{allNutritions.name}</option>
 )


const renderNutritions = ({ fields, meta: { error, submitFailed }, 
allNutritions, unitOfMeasures}) => (

 <ul style={{ padding: 15 }} className='list-group list-group-flush'>
   {fields.map((nutrition, index) => (
    <ul key={index} className='list-group-item'>
       <div className='row' style={{ padding: 10 }}> 
      <div className='col col-md-3'>
        <Field disabled={true} name={`${nutrition}.nutritionId`} 
       component="select" className='btn btn-secondary dropdown-toggle btn-sm'>
           {_.map(allNutritions, renderAllNutritions)}
         </Field>
       </div>

      <div className='col col-md-1'>
        <Field
          name={`${nutrition}.quantity`}
          type="text"
          component={renderTextField}
          label=""
          onChange={e => {
            calledOnChange(e)
          }}
        />
      </div>
      <div className='col col-md-3'>
        <Field disabled={true} name={`${nutrition}.unitOfMeasureId`} 
         component="select" className='btn btn-secondary dropdown-toggle btn-sm'>
          {_.map(unitOfMeasures, renderUnitOfMeasures)}
        </Field>
      </div>
    </div>
  </ul>
))}
<button type="button" onClick={() => fields.push({})} className='btn btn- primary col-md-1'>
  Add Nutrition
  </button>
{submitFailed && error && <span>{error}</span>}
</ul>
)

class AddEditNutritionsForm extends Component {
  render() {

  const { handleSubmit, reset, allNutritions, unitOfMeasures} = this.props;

  console.log(unitOfMeasures);
  return (
  <form onSubmit={handleSubmit}>
    <div>
      <FieldArray name="foodNutritionDetails" component={renderNutritions} allNutritions={allNutritions.nutritions} unitOfMeasures={unitOfMeasures.unitOfMeasure}/>
    </div>
    <div>
      <button type="submit" className='btn btn-primary'>Submit</button>
      <button type="button" className="btn btn-danger" onClick={reset}>
        Clear Values
      </button>
    </div>
  </form>
  )
 }
 }

export default reduxForm({
   form: 'NutritionsForm',
   enableReinitialize: true
})(AddEditNutritionsForm);

Answer 1

而不是disabled={true}，您需要在其中放置所需条件的所有新字段都将使用它。

我假设您只想禁用前 2 个字段？ 然后输入disabled={ index < 2 }