如何从 selectedOption 中获取值并显示它

Question

我只想向你展示它收到的价值

    handleChange = (selectedOption, e) => {

    e.preventDefault();

    this.setState({

        selectedOption

    });

    console.log(selectedOption);

}

render() {

    let options = [];

    if (this.state.cityName && this.state.cityName.length > 0) {

        options = this.state.cityName.map((cityName) => {

            return {

                value: cityName.AdministrativeArea.LocalizedName,

                label: cityName.AdministrativeArea.LocalizedName,

                id: cityName.Key

            };

        })

    }

    return (

        <div className="container">

            <h1 htmlFor="Search">Search</h1>

            <Select

                name="htmlForm-field-name"

                value={this.state.value}

                onChange={(e) => this.handleChange}

                defaultValue='Jerusalem'

                options={options}

            />

            <div>

                <ul>

                    {this.state.value}

                </ul>

如何使用 selectedOption 进行操作

另一个问题是如何在 API 中执行 defaultValue？

Answer 1

您正在使用this.state.value但正在更新this.state.selectedOption. 两者必须相同。我认为您正在使用 Material UI Select 所以我也这样做：import React, { Component } from "react";import { Select, MenuItem } from '@material-ui/core';class Test extends Component {&nbsp; state = {&nbsp; &nbsp; selectedOption: ""&nbsp; };&nbsp; handleChange = selectedOption => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; selectedOption&nbsp; &nbsp; });&nbsp; &nbsp; console.log(selectedOption);&nbsp; };&nbsp; render() {&nbsp; &nbsp; let options = [];&nbsp; &nbsp; if (this.state.cityName && this.state.cityName.length > 0) {&nbsp; &nbsp; &nbsp; options = this.state.cityName.map(cityName => {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: cityName.AdministrativeArea.LocalizedName,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: cityName.AdministrativeArea.LocalizedName,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: cityName.Key&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; const { selectedOption } = this.state;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="container">&nbsp; &nbsp; &nbsp; &nbsp; <h1 htmlFor="Search">Search</h1>&nbsp; &nbsp; &nbsp; &nbsp; <Select&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="htmlForm-field-name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={selectedOption}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={e => this.handleChange(e.target.value)}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {options.map(o => <MenuItem value={o.value}>{o.label}</MenuItem>)}&nbsp; &nbsp; &nbsp; &nbsp; </Select>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>{selectedOption}</ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default Test;

Answer 2

工作示例：import React, { Component } from "react";import Select from "react-select";class App extends Component {&nbsp; handleChange = el => {&nbsp; &nbsp; console.log(el.value);&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <Select&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ width: 100 }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options={[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { value: "green", label: "Green", color: "#36B37E" },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { value: "forest", label: "Forest", color: "#00875A" },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { value: "slate", label: "Slate", color: "#253858" },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { value: "silver", label: "Silver", color: "#666666" }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default App;