Как включить отключенные поля в массиве полей избыточной формы при нажатии кнопки вставки? - PullRequest
Новая
       2

Как включить отключенные поля в массиве полей избыточной формы при нажатии кнопки вставки?

0 голосов
/ 11 марта 2019

У меня есть избыточная форма, которая имеет 3 поля, и 2 из этих полей не могут быть отредактированы (Использование полевых массивов в избыточных формах).Поэтому поля отключены в режиме редактирования.Но при добавлении нового элемента в форме появляются те же отключенные поля, которые я добавил disabled={true}.Как я могу удалить состояние отключения поля при добавлении нового элемента с помощью кнопки добавления нового из массива полей избыточной формы?Я следовал редукция формы fieldarray пример.

The image shows the form that I have built and the two drop downs are disabled. Only the numerical value field is enabled to edit. enter image description here

Это код, написанный дляформа.

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

1 Ответ

0 голосов
/ 15 марта 2019

Вместо disabled={true}, который будет использоваться всеми новыми полями, вам нужно поставить там условие, которое вы хотите.

Я полагаю, вы хотите отключить только первые 2 поля? Затем положить disabled={ index < 2 }

...