Reactjs 如何使用下拉菜单选择更新反应状态？我在下拉列表中使用语义用户界面
因此onChange对于zipcode输入和设置状态非常有效，但是当选择下拉菜单选项时，它不会更新状态Reactjs 如何使用下拉菜单选择更新反应状态？我在下拉列表中使用语义用户界面,reactjs,semantic-ui-react,Reactjs,Semantic Ui React,因此onChange对于zipcode输入和设置状态非常有效，但是当选择下拉菜单选项时，它不会更新状态 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'; i
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;
从“../../history”导入历史记录；
从'react redux'导入{connect}；
从“语义ui反应”导入{按钮、表单、网格、标题、消息、段}；
从'react router dom'导入{Link}；
从“qs”导入qs；
从“axios”导入axios；
从“./utils/RestUtils”导入{url}；
从“语义ui反应”导入{Dropdown}
从“../../actions”导入{getList}；
常量选项=[
{键：1，文本：'abc'，值：'abc'}，
{键：2，文本：'def'，值：'def'}，
{键：3，文本：'ghi'，值：'ghi'}，
]
导出类示例扩展组件{
建造师（道具）{
超级（道具）；
此.state={
zipCode:“”，
选项：“
};
}
handleSubmit（）{
}
handleChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
});
console.log（this.state）；
}
render（）{
返回(
在下面搜索以查找您所在地区的设施。
搜寻
)
}
}
导出默认示例；
它如何添加未定义的第三个值，以及如何修复此问题，以便“如果我选择abc，则选项状态将更新为值abc？”For semantic ui下拉列表
onChange <Dropdown
placeholder="Select Country"
fluid
search
selection
onChange={onChangeDropDown}
options={countryOptions}
/>
const onChangeDropDown = (event, data) => {
this.setState({ country: data.value })
}
请查找语义ui下拉列表的示例沙盒
onChange <Dropdown
placeholder="Select Country"
fluid
search
selection
onChange={onChangeDropDown}
options={countryOptions}
/>
const onChangeDropDown = (event, data) => {
this.setState({ country: data.value })
}
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;
从“React”导入React；
从“语义ui反应”导入{Dropdown}；
常量选项=[
{键：1，文本：“abc”，值：“abc”}，
{键：2，文本：“def”，值：“def”}，
{键：3，文本：“ghi”，值：“ghi”}
];
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
zipCode:“”，
选项：“
};
}
handleSubmit（）{}
handleDropdownChange=（e，数据）=>{
e、 坚持（）；
this.setState（{options:data.value}）；
};
handleChange=（事件、数据）=>{
event.persist（）；
这是我的国家({
[event.target.name]：event.target.value
});
};
render（）{
console.log（this.state）；
返回(
在下面搜索以查找您所在地区的设施。
搜寻
);
}
}
常量DropdownExampleSelection=（）=>；
导出默认下拉列表ExampleSelection；
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;
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;
从“React”导入React；
从“语义ui反应”导入{Dropdown}；
常量选项=[
{键：1，文本：“abc”，值：“abc”}，
{键：2，文本：“def”，值：“def”}，
{键：3，文本：“ghi”，值：“ghi”}
];
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
zipCode:“”，
选项：“
};
}
handleSubmit（）{}
handleDropdownChange=（e，数据）=>{
e、 坚持（）；
this.setState（{options:data.value}）；
};
handleChange=（事件、数据）=>{
event.persist（）；
这是我的国家({
[event.target.name]：event.target.value
});
};
render（）{
console.log（this.state）；
返回(
在下面搜索以查找您所在地区的设施。
搜寻
);
}
}
常量DropdownExampleSelection=（）=>；
导出默认下拉列表ExampleSelection；
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;