Question

我想不出一个表达这个问题的好方法，因此如果您无法理解，我会提前道歉。这是整个问题。

我使用的是react-select，它是为react打包的第三方，可轻松创建样式化的Select元素。 https://react-select.com/。

我有一个表单组件，它是一个可交互的列表，它为用户提供了一种向列表中添加元素并根据需要从列表中删除元素的方法。每个元素都由键和值对组成。键是由react-select中的单个选择元素选择的，并且输入基于我自己的输入组件。删除元素后，所有背面值都将正确更新，但是将正面选择值下推。例如，说我从列表[Element1，Element2，Element3]中的这些键开始。如果删除Element1，则该窗体显示为[Element1，Element2]而不是[Element2，Element3]，但是从窗体中拉出值时，这些值是正确的并且与梯形图匹配。我已经搞混了一段时间了，尝试设置ID，重新渲染所有项目，将显示值设置为后端值（这一部分对我来说，对于反应选择，所有元素都没有多大意义可以使用值选项，但不知道如何显示值）。

这里是所有相关代码，如果您需要更多信息，请告诉我，我们将竭诚为您服务。我刚刚开始学习Web开发，这是我第一次真正被迷住。

在我的容器中，所有内容均来自

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

最后，选择元素

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

我知道该过程是有效的，因为除前端值之外的所有东西都可以起作用，即使输入是否呈现也取决于接收到的密钥，这绝对是react-select程序包的复杂性。

如果找不到解决方案，我很可能会构建自己的选择组件（无论如何还是值得练习的），但这困扰了我很久了，我只是想知道是否有解决方案

谢谢大家的时间。

删除反应选择元素会错误地更新前端值

0 个答案: