javascript - 如何从父标签上的子标签 onChange 获取文本？

Question

我想获取 Select 组件内的选项标记的文本(城市名称)，并将其用于 handleChangeCity() 函数。问题是，我尝试使用 event.target.text 在 handleChangeCity() 函数中访问此文本，但它返回整个选项标签，而不仅仅是其中的文本。我该怎么做？

                  <Select
                      native
                      onChange={this.handleChangeCity}
                      value={location.id}
                      required
                      disabled={locacation.idState === 0}
                      style={styles.widthInput}
                    >
                      {cities.map(city=> (
                        <option key={city.id} value={city.id} disabled={city.id === 0}>
                          {city.name}
                        </option>
                      ))}
                    </Select>

功能:

handleChangeCity = (optionSelected) => {
    const { location } = this.state;
    this.setState({ location: { ...location, idCity: optionSelected.target.value, nameCity: optionSelected.target.text } });
  }

Answer 1

您正在尝试获取选择的文本。要获取所选选项的文本，您可以执行以下操作:

handleChangeCity = (optionSelected) => {
    const { location } = this.state;
    const { options, selectedIndex } = optionSelected.target;
    this.setState({
        location: {
            ...location,
            idCity: optionSelected.target.value,
            nameCity: options[selectedIndex].text
        }
    });
};