Question

因此onChange可以完美地用于邮政编码输入并设置状态，但是当选择下拉菜单选项时，它不会更新状态。

import history from '../../history';
import {connect} from 'react-redux';
import { Button, Form, Grid, Header, Message, Segment } from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import qs from "qs";
import axios from 'axios';
import { url } from "../utils/RestUtils";
import { Dropdown } from 'semantic-ui-react'
import { getList } from '../../actions';


const options = [
  { key: 1, text: 'abc', value: 'abc' },
  { key: 2, text: 'def', value: 'def' },
  { key: 3, text: 'ghi', value: 'ghi' },
]

export class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zipCode: "",
      options: ""
    };
  }

  handleSubmit() {




}

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
    console.log(this.state);
  }

  render() {
    return (

      <div>
      <form>

      <div style={{marginLeft: "50px", marginTop: "50px"}}>
      <h1 style={{color: "darkblue", fontSize:""}} >Search below to find facilities in your area.</h1>
      <div style={{marginTop: "20px"}} className="ui big icon input">


      <Dropdown style={{width: "300px"}}
    search

    onSearchChange={this.handleChange}
    name="options"
    selection
    wrapSelection={false}
    onChange={this.handlechange}
    options={options}
    placeholder='abc'
  />
<input style={{marginLeft: "10px", width:"200px"}} type="text" placeholder="57115" name="zipCode" onChange={this.handleChange} />
      <button style={{marginLeft: "10px", width: "150px"}} className="ui facebook button">Search</button>
      </div>
      </div>
      </form>

     </div>
   )
  }
}

export default Example;

在执行onChange以更新下拉菜单时，console.log（this.state）显示----

{zipCode：“ 47117”，选项：“”，未定义：未定义}

它如何添加未定义的第三个值，以及如何解决此问题，以便如果我选择abc，则选项状态将更新为abc？

Answer 1

对于语义用户界面下拉菜单SELECT Item, SUM(QtyOrdered) QtyOrdered FROM Table GROUP BY Item;，其工作原理如下

让下拉列表为

onChange

countryOptions是格式为

的下拉选项

 <Dropdown
  placeholder="Select Country"
  fluid
  search
  selection
  onChange={onChangeDropDown}
  options={countryOptions}
 />

然后onChange函数将用作

const countryOptions = [
 { key: "af", value: "af", flag: "af", text: "Afghanistan" },
 { key: "ax", value: "ax", flag: "ax", text: "Aland Islands" },
 { key: "al", value: "al", flag: "al", text: "Albania" },
 { key: "dz", value: "dz", flag: "dz", text: "Algeria" },
]

请找到示例沙箱here

Answer 2

语义UI下拉菜单onChange的工作方式有所不同。您需要像这样更改以下代码：

import React from "react";
import { Dropdown } from "semantic-ui-react";

const options = [
  { key: 1, text: "abc", value: "abc" },
  { key: 2, text: "def", value: "def" },
  { key: 3, text: "ghi", value: "ghi" }
];

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      zipCode: "",
      options: ""
    };
  }

  handleSubmit() {}
  handleDropdownChange = (e, data) => {
    e.persist();

    this.setState({ options: data.value });
  };

  handleChange = (event, data) => {
    event.persist();
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  render() {
    console.log(this.state);
    return (
      <div>
        <form>
          <div style={{ marginLeft: "50px", marginTop: "50px" }}>
            <h1 style={{ color: "darkblue", fontSize: "" }}>
              Search below to find facilities in your area.
            </h1>
            <div style={{ marginTop: "20px" }} className="ui big icon input">
              <Dropdown
                style={{ width: "300px" }}
                search
                onSearchChange={this.handleDropdownChange}
                name="options"
                selection
                wrapSelection={false}
                onChange={this.handleDropdownChange}
                options={options}
                placeholder="abc"
              />
              <input
                style={{ marginLeft: "10px", width: "200px" }}
                type="text"
                placeholder="57115"
                name="zipCode"
                onChange={this.handleChange}
              />
              <button
                style={{ marginLeft: "10px", width: "150px" }}
                className="ui facebook button"
              >
                Search
              </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

const DropdownExampleSelection = () => <Example />;

export default DropdownExampleSelection;

演示：https://codesandbox.io/s/semantic-ui-react-example-j2n0s

您不必事件而是语义传递其自己的props数据，这些数据可用于设置状态。

如何通过下拉菜单选择更新反应状态？我正在为下拉菜单使用语义UI

2 个答案: