В реагировать, работая с избыточной формой, используя FieldArray для добавления полей в форму при каждом нажатии кнопки - PullRequest
Новая
       7

В реагировать, работая с избыточной формой, используя FieldArray для добавления полей в форму при каждом нажатии кнопки

0 голосов
/ 29 января 2019

В реакции, работа с избыточной формой, использование FieldArray для добавления полей в форму при каждом нажатии кнопки.Всего 3 поля.Первые 2 поля являются раскрывающимися.При изменении значения в первом раскрывающемся списке заполняются параметры для второго раскрывающегося списка.Это отлично работает при первой загрузке.T

Проблема: предположим, что я добавил 3 элемента, то есть кнопка была нажата 3 раза, а полевой массив теперь содержит 3 элемента.Когда я удаляю первый элемент, следующие 2 элемента должны оставаться неизменными, но это не так.Значения для 2-го элемента изменяются на 1-й элемент, а значение для 3-го элемента изменяется на 2-й.Проблема в том, что индекс используется для поддержания состояния.

Добавление моего кода ниже: 

import React from 'react';
import { Field } from 'redux-form';
import { Row, Col } from 'reactstrap';
import { TextInput } from '../../../../shared/components/form/TextInput';
import renderSelectField from '../../../../shared/components/form/Select';
import { UniqueUserCodeLangaugeSupport } from '../../../../constants/UniqueUserCodeManagerConstant';
import DeleteOutlined from '@material-ui/icons/DeleteOutlined';

class AddConditions extends React.Component {
  constructor() {
    super();
    this.state = {
      columnOptions: [],
    }
    this.onChangeColumn = this.onChangeColumn.bind(this);
    this.changeValue = this.changeValue.bind(this);
  }

  componentDidMount() {
    /*
     * to make the array to be given to the eligible column dropdown
    */
    const columnOptions = this.props.selectedTable.columns.map(column => {
      return {
        value: column.id.toString(),
        label: column.name,
        type: column.type
      }
    });
    this.setState({
      columnOptions
    })
  }

  onChangeColumn(index, event) {
    // A better and right way needed to achieve this entire logic
    let conditionOptions;
    this.setState({
      [`column_type${index}`]: event.type
    });
    if(event.type === 'number') {
      conditionOptions = this.props.applicableConditions.number.map(condition => {
        return {
          value: condition.id.toString(),
          label: condition.name
        }
      });
    } else if(event.type === 'text') {
      conditionOptions = this.props.applicableConditions.text.map(condition => {
        return {
          value: condition.id.toString(),
          label: condition.name
        }
      });
    } else if(event.type === 'datetime') {
      conditionOptions = this.props.applicableConditions.datetime.map(condition => {
        return {
          value: condition.id.toString(),
          label: condition.name
        }
      });
    }
    this.setState({
      [`conditionOptions${index}`]: conditionOptions
    })
  }

  changeValue(index, event) {
    console.log("some logic here");
  }


  render() {
    const { fields } = this.props;
    const { columnOptions } = this.state;
    return (
      <div>
    {fields.map((condition, index) => (
      <div className="single-condition-container" key={index}>
        <div className="condition-text">
          <span className="material-table__toolbar-button-active" onClick={() => fields.remove(index)}><DeleteOutlined /></span>
        </div>
        <div className="form__form-group">
          <span className="form__form-group-label">{UniqueUserCodeLangaugeSupport.addEditForm.conditions.field1}</span>
          <div className="form__form-group-field">
            <Field
              name={`${condition}.column_id`}
              component={renderSelectField}
              options={columnOptions}
              placeholder="Select Column"
              onChange={(e) => this.onChangeColumn(index, e)}
            />
          </div>
        </div>
        <div className="form__form-group">
          <span className="form__form-group-label">{UniqueUserCodeLangaugeSupport.addEditForm.conditions.field2}</span>
          <div className="form__form-group-field">
            <Field
              name={`${condition}.condition_id`}
              component={renderSelectField}
              options={this.state[`conditionOptions${index}`]}
              placeholder="Select value"
              onChange={(e) => this.changeValue(index, e)}
            />
          </div>
        </div>
      </div>
    ))}
      <button className="btn btn-outline-primary btn-sm text-uppercase margin-top-30" type="button" onClick={() => fields.push({})} >
        {fields.length > 0 ? 'Add More' : UniqueUserCodeLangaugeSupport.addEditForm.addEligibility}
      </button>
      </div>
    );
  }
}

export default AddConditions;

В родительском компоненте вышеуказанный компонент отображается как: 

<FieldArray name="conditions" component={AddConditions} selectedTable={selectedTable} applicableConditions={applicableConditions} change={this.props.change} />

Когда я удаляю первый элемент, скажем, чей индекс равен 0, мой второй элемент, чей индекс равен 1, теперь находится на 0-й позиции и принимает параметры раскрывающегося списка conditionOptions0.Любой другой способ работы с fieldArray без необходимости делать setState на основе индекса?

...