Удаление элемента реакции-выбора некорректно обновляет входные значения - PullRequest
Новая
       10

Удаление элемента реакции-выбора некорректно обновляет входные значения

0 голосов
/ 25 сентября 2018

Я не мог придумать, как правильно сформулировать этот вопрос, поэтому заранее прошу прощения, если вы не понимаете этого.Здесь проблема в полном объеме.

Я использую реагирующий выбор, стороннюю упаковку для реакции, которая позволяет легко создавать стилизованные элементы выбора.https://react -select.com / .

У меня есть компонент формы, представляющий собой интерактивный список, который предоставляет пользователю возможность добавлять элемент в список и удалять элементы всписок по мере необходимости.Каждый элемент состоит из пары ключ и значение.Ключи выбираются одним элементом select из response-select, а ввод основан на моем собственном компоненте ввода.Когда элемент удаляется, все задние лицевые значения обновляются должным образом, однако выбранные лицевые значения толкаются вниз.Например, скажем, я начинаю с этих ключей в моем списке [Element1, Element2, Element3].Если я удаляю Элемент1, форма отображается как [Элемент1, Элемент2], а не как [Элемент2, Элемент3], но при извлечении значений из формы значения являются правильными и соответствуют лестнице.В течение некоторого времени я возился с этим, пытаясь установить идентификаторы, перерисовать все элементы, установить для отображаемого значения значение бэкэнда (эта часть не имеет большого смысла для реагирования на выбор, все элементыможет принимать значение параметра, но он не знает, как отображать значения).

Вот весь соответствующий код, если вам нужна дополнительная информация, пожалуйста, дайте мне знать, и я буду рад помочь.Я только начал изучать веб-разработку, и это первый раз, когда я был по-настоящему озадачен.

В моем контейнере все отображается из 

  handleAddClick = ( elementLabel ) => {
    const newForm = addClickHandler( this.state.currentForm, elementLabel );
    this.setState( {
      ...this.state,
      currentForm: newForm
    } );
  }

  handleRemoveClick = ( elementLabel, index ) => {
    const newForm = removeClickHandler( this.state.currentForm, elementLabel, index );
    this.setState( {
      ...this.state,
      currentForm: newForm
    } );
  }

В моем lib / form.js (по умолчаниюэто параметры по умолчанию для пары ключ-значение для добавления) 

export const addClickHandler = ( oldForm, element ) => {
  const form = [ ...oldForm ];
  for ( let i in form ) {
    if ( form[ i ].elementLabel === element ) {
      form[ i ].value.push( { ...form[ i ].default
      } );
    }
  }
  return form;
}


export const removeClickHandler = ( oldForm, element, index ) => {
  const form = [ ...oldForm ];
  for ( let i in form ) {
    if ( form[ i ].elementLabel === element ) {
      form[ i ].value = [ ...form[ i ].value.slice( 0, index ), ...form[ i ].value.slice( index + 1 ) ]
    }
  }
  return form;
}

Элемент формы (который вызывает другой элемент формы) 

const extendableListElement = ( props ) => {
  const optionPairs = {};
  const options = [];
  for ( let j in props.options ) {
    options.push( Object.assign( {}, props.options[ j ] ) )
    optionPairs[ props.options[ j ].value ] = options[ j ].hasField
  };
  const elements = props.value.map( ( element, index ) => {
    const selectElementProps = {
      index: index,
      value: element.key,
      handleChange: props.handleChange,
      placeholder: element.keyPlaceholder,
      options: options
    }
    const inputElementProps = {
      index: index,
      value: element.value,
      placeholder: element.valuePlaceholder,
      handleChange: props.handleChange
    }
    let inputElement = null;
    if ( optionPairs[ selectElementProps.value ] ) {
      inputElement = <InputElement {...inputElementProps} />;
    }
    return (
      <div key={index} style={{"margin": "1vh 2vw 1vh 15px"}}>
          <Row>
            <Col lg={4} md={4} sm={4} xs={4} >
              <SelectElement {...selectElementProps} />
            </Col>
            <Col lg={7} md={7} sm={7} xs={7} >
              { inputElement }
            </Col>
            <Button clicked={() => props.removeClicked(props.label, index)}><Glyphicon glyph="minus-sign"/></Button>
          </Row>
        </div>
    )
  } )


  return (
    <Aux>
      <Row>
        {elements}
      </Row>
      <div style={{"marginTop": "1vh"}}>
        <Button clicked={props.addClicked}><Glyphicon glyph="plus-sign"/></Button>
      </div>
    </Aux>
  );
}

Наконец, элемент select 

const selectElement = ( props ) => {
  let elementOptions = null;
  if ( props.index >= 0 ) {
    elementOptions = [];
    for ( let option in props.options ) {
      elementOptions.push( Object.assign( {}, props.options[ option ], {
        index: props.index
      } ) )
    }
  } else {
    elementOptions = props.options
  }

  return (
    <Select
      className="basic-single"
      classNamePrefix="select"
      onChange={props.handleChange}
      options={elementOptions}
    />
  )
};

Я знаю, что этот процесс работает, так как все, кроме значения внешнего интерфейса, работает, даже если ввод отображается или не работает, что зависит от полученного ключа, это определенно запутанно в пакете реагировать на выбор.

Если я не могу найти решение этой проблемы, я, скорее всего, создам свой собственный выбранный компонент (вероятно, в любом случае стоит потренироваться), но это беспокоило меня так долго, что мне просто любопытно, если естьэто решение.

Спасибо всем за ваше время.

...