亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何從 selectedOption 中獲取值并顯示它

如何從 selectedOption 中獲取值并顯示它

搖曳的薔薇 2021-10-29 17:02:37
我只想向你展示它收到的價值    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?
查看完整描述

2 回答

?
白衣非少年

TA貢獻1155條經驗 獲得超0個贊

您正在使用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 {

  state = {

    selectedOption: ""

  };


  handleChange = selectedOption => {

    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

        };

      });

    }

    const { selectedOption } = this.state;

    return (

      <div className="container">

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

        <Select

          name="htmlForm-field-name"

          value={selectedOption}

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

        >

          {options.map(o => <MenuItem value={o.value}>{o.label}</MenuItem>)}

        </Select>

        <div>

          <ul>{selectedOption}</ul>

        </div>

      </div>

    );

  }

}


export default Test;


查看完整回答
反對 回復 2021-10-29
?
一只甜甜圈

TA貢獻1836條經驗 獲得超5個贊

工作示例:


import React, { Component } from "react";

import Select from "react-select";


class App extends Component {

  handleChange = el => {

    console.log(el.value);

  };


  render() {

    return (

      <div>

        <Select

          style={{ width: 100 }}

          onChange={this.handleChange}

          options={[

            { value: "green", label: "Green", color: "#36B37E" },

            { value: "forest", label: "Forest", color: "#00875A" },

            { value: "slate", label: "Slate", color: "#253858" },

            { value: "silver", label: "Silver", color: "#666666" }

          ]}

        />

      </div>

    );

  }

}


export default App;


查看完整回答
反對 回復 2021-10-29
  • 2 回答
  • 0 關注
  • 199 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號