DropDown 状态不保留在 React 中

Question

我有一个 React DropDown 组件，如下所示：

当我做出选择时一切正常，如下所示：

现在问题来了，我的下拉打开关闭处理程序可以工作，但每次它关闭并重新打开以前的值时，即使它们保留在 console log 中，但它们不会显示在 UI.

DropDownControlHandler = (handleElem) =>
    {
        const newState = this.state;
        
        newState.isDropDownOpen = handleElem; 

        console.log(this.DropDownElements);
 
        this.setState({state: newState,DropDownElements: this.DropDownElements});
        //this.CheckBoxChangeHandler(-10,this.DropDownElements);
        

    }

    CheckBoxChangeHandler = (index) => {

        
        let newData = this.DropDownElements;
        if(!this.state.isMultiSelectOn)
        { 
            console.log("Executing if");
            newData = this.ClearAllElements;
            console.log(newData);
        }

        newData[index].isChecked = !(newData[index].isChecked);
        console.log("New Data:- ");
        console.log(newData);
        this.setState({DropDownElements: newData});
        

    }

有人可以帮我吗？这是 reproduction link.

最终目标：在关闭和打开下拉菜单时，数据应该保留，当 isMultiSelectOn 为 false 时，只有一个选择应该发生，而不是其他选择。

Answer 1

数据已经保存，它没有反映在 ui 上，因为你没有在其选中的属性中添加真实值，请参见下面的代码我已经添加了选中的属性现在在ui.

中体现的很清楚

const DropDownBoxComponents = this.DropDownElements.map(

  (element, index) => {

    return (

      <div className={classes.DropDownContainer} key={element.id}>

        <input

          type="checkbox"

          className={classes.CheckBox}

          onChange={() => {

            this.CheckBoxChangeHandler(index);

          }}

          value={element.isChecked}

          checked={element.isChecked} // this is what you need to add

        />

        <div className={classes.CheckBoxElement}>{element.value}</div>

      </div>

    );

  }

);

我在 ui 中找不到 isMultiSelectOn 选项，所以我无法告诉这部分问题的解决方案，但是 ui 部分现在可以打开和关闭下拉菜单

DropDown 状态不保留在 React 中

DropDown State not preserving in React

state

reactjs

dropdown