React中如何用setState保存可变数量Select标签的选项值

嘿，我来帮你搞定这个问题！作为React新手，要保存每个动态生成的Select的选中值其实很简单，核心是让每个Select和state里的对应字段绑定，并且在变化时知道是哪个问题的选项被修改了。下面是修改后的完整代码，我会一步步给你讲改动点：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      liste: {}, // 你的原有问题列表数据
      selectedAnswers: {} // 新增：存储每个问题的选中答案
    };
  }

  // 修改后的handleChange，接收问题key
  handleChange = (e, questionKey) => {
    const { value } = e.target;
    this.setState(prevState => ({
      selectedAnswers: {
        ...prevState.selectedAnswers,
        [questionKey]: value
      }
    }));
  };

  render() {
    return (
      <Card>
        <Card.Header>
          <Card.Title as='h5'> Select questions and their answer to create the decision tree </Card.Title>
        </Card.Header>
        <Card.Body>
          {Object.entries(this.state.liste).map(([ke, values]) => {
            return (
              <div className="row " key={ke}> {/* 给循环的div加上key，React列表要求 */}
                <div className="col-xl-11">
                  <h6 className="align-items-center float-left">{ke}</h6>
                  <div className="progress-bar progress-c-theme" role="progressbar" style={{width: '0%'}} aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"/>
                  <div className="text-right">
                    <div className="col-md-11" style={{ width: '130px', height: '20px', top: '-20px', right: '-400px' }}>
                      <select 
                        name="secondSelectt" 
                        value={this.state.selectedAnswers[ke] || ''} {/* 绑定选中值，受控组件 */}
                        onChange={(e) => this.handleChange(e, ke)} {/* 传递当前问题的key */}
                      >
                        {Object.values(values).map(key => {
                          return (
                            <option key={key} value={key}>{key}</option> {/* 加上key和value属性 */}
                          );
                        })}
                      </select>
                    </div>
                  </div>
                  <div className="progress m-t-30 m-b-20" style={{height: '1px'}}>
                    <div className="progress-bar progress-c-theme" role="progressbar" style={{width: '0%'}} aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"/>
                  </div>
                </div>
              </div>
            )
          })}
        </Card.Body>
      </Card>
    );
  }
}

关键改动说明： #

• 新增state字段：添加selectedAnswers对象，用来存储每个问题（对应循环里的ke）的选中答案，初始为空对象。
• 更新handleChange函数：让它接收当前问题的ke作为参数，这样在更新state时，能精准定位到要修改的问题答案。这里用了函数式更新setState(prevState => ...)，确保我们基于最新的state状态进行更新，避免多选项变化时的状态覆盖问题。
• 转为受控组件：给每个Select设置value属性，绑定到this.state.selectedAnswers[ke]，如果还没选中任何值就用空字符串。这样Select的显示会和state完全同步，符合React单向数据流的设计理念。
• 传递问题标识：在Select的onChange事件中，把当前问题的ke传递给handleChange，让函数知道要更新哪个问题的答案。
• 修复列表渲染要求：给循环生成的最外层div加上key={ke}，同时给每个option加上key和value属性，满足React列表渲染的规范，避免警告。

现在你可以通过this.state.selectedAnswers获取所有问题的选中答案啦，比如this.state.selectedAnswers['某个问题key']就能拿到对应的选中值。

内容的提问来源于stack exchange，提问作者Hkni