React组件中如何将选中值传入辅助方法并更新state

要实现选中值更新state，同时传递给辅助方法，只需完成以下操作：

1. 将select设置为受控组件并绑定事件
   给select绑定value属性关联state里的selectedValue，同时绑定onChange事件到handleOnChange方法，确保选中值变化时触发逻辑执行。

2. 修改handleOnChange方法，更新state并调用辅助方法
   在handleOnChange中通过event.target.value获取选中值，先更新state，再将选中值作为参数传入自定义辅助方法。

修改后的完整代码如下：

class SelectParker extends Component {
  state = {
    selectedValue: "",
    values: [],
  };

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(function (res) {
        return res.json();
      })
      .then((json) => {
        this.setState({
          values: json,
        });
      });
  }

  // 自定义辅助方法，接收选中值作为参数
  processSelectedValue = (selectedId) => {
    // 这里可编写业务逻辑，比如根据ID获取用户详情等
    console.log("处理选中的用户ID：", selectedId);
  };

  handleOnChange = (event) => {
    const selectedId = event.target.value;
    // 更新state中的选中值
    this.setState({
      selectedValue: selectedId
    }, () => {
      // setState为异步操作，若需在state更新完成后执行辅助方法，放在回调内
      this.processSelectedValue(selectedId);
    });
    // 若无需等待state更新结果，可直接调用辅助方法
    // this.processSelectedValue(selectedId);
  };

  render() {
    return (
      <div className="card">
        <div className="card-header">Select Parker</div>
        <div className="card-body">
          <div>
            <select 
              className="form-select" 
              aria-label="Default select example"
              value={this.state.selectedValue}
              onChange={this.handleOnChange}
            >
              {/* 添加默认选项优化用户体验 */}
              <option value="">请选择用户</option>
              {this.state.values.map((obj) => {
                return (
                  <option key={obj.id} value={obj.id}>
                    {obj.name}
                  </option>
                );
              })}
            </select>
          </div>
        </div>
      </div>
    );
  }
}

export default SelectParker;

关键说明： #

• 受控组件：通过value={this.state.selectedValue}让select的显示值与state保持同步。
• 事件触发：每次选中项变化时，handleOnChange会被调用，通过event.target.value获取选中的option值。
• 异步处理：setState是异步操作，如果需要基于更新后的state执行逻辑，要把辅助方法调用放在setState的回调函数中；无需等待更新结果则可直接调用。

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