React - 从列表中选择的值未定义答案

【问题标题】：React - selected value from list is undefinedReact - 从列表中选择的值未定义
【发布时间】：2020-03-27 02:19:29
【问题描述】：

我有一个 React 组件 SelectObj，它从我的 api 获取数据并将其传递给组件 DynamicSelect。 DynamicSelect 创建一个选择列表。当用户选择选项时，选择的值应该返回给SelectObj。

DynamicSelect.js：

export class DynamicSelect extends Component {
  constructor(props) {
    super(props);
  }

  handleChange = event => {
    let selectedValue = event.value;
    this.props.onSelectChange(selectedValue);
  };

  render() {
    let arrayOfData = this.props.arrayOfData;

    let options = arrayOfData.map(data => (
      <option key={data.id} value={data.objective_name}>
        {data.objective_name}
      </option>
    ));
    //console.log(options);

    return (
      <select
        name="customSearch"
        className="custom-search-select"
        onChange={this.handleChange}
      >
        <option>Select item</option>
        {options}
        {console.log(options)}
      </select>
    );
  }
}

export default DynamicSelect;

SelectObj.js

import { getObjectives } from "../../actions/assessments";
import { DynamicSelect } from "./DynamicSelect";

export class SelectObj extends Component {
  static PropTypes = {
    objectives: PropTypes.array.isRequired,
    getObjectives: PropTypes.array.isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      selectedValue: "Nothing selected"
    };
  }

  handleSelectChange = selectedValue => {
    this.setState({
      selectedValue: selectedValue
    });
  };

  componentDidMount() {
    this.props.getObjectives();
  }

  render() {
    let arrayOfData = this.props.objectives;

    return (
      <Fragment>
        <DynamicSelect
          arrayOfData={arrayOfData}
          onSelectChange={this.handleSelectChange}
        />
        {console.log(this.state.selectedValue)}
        <div>Selected Value: {this.state.selectedValue}</div>
      </Fragment>
    );
  }
}

const mapStateToProps = state => ({
  objectives: state.objectives.objectives
});

export default connect(mapStateToProps, { getObjectives })(SelectObj);

DynamicSelect 中的 console.log 打印出我期望的选项，而 SelectObj 中的 console.log 是未定义的。如何从 DynamicSelect 中获取此选定值？

我想我可能必须将我的 handleChange 与 this.handleChange = this.handleChange.bind.(this) 绑定，但这并没有解决这个问题（也许我仍然应该绑定 handleChange？）。

【问题讨论】：

标签： reactjs event-handling

【解决方案1】：

<DynamicSelect
   arrayOfData={arrayOfData}
   onSelectChange={(e) => this.handleSelectChange(e)}
/>

尝试像这样传递你的函数，看看结果是否正在更新。

【讨论】：

Gayathri - 结果相同。