Question

我有一个redux表单，其中包含3个字段，并且其中2个字段无法编辑（在redux-forms中使用fieldarrays）。因此，在编辑模式下禁用了这些字段。但是，当添加新项目时，与我添加的disabled={true}相同的禁用字段也会显示在表单中。使用Redux表单字段数组中的添加新按钮添加新项时，如何删除字段的禁用状态？我遵循了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 }

当按下插入项目按钮时，如何在redux形式的字段数组中启用禁用字段？

1 个答案: