Reactjs 语义ui反应将下拉列表值设置为状态

如何让下拉列表在状态中选择值。这是我的代码，我正在获取名称字段的值，但下拉列表不起作用，有人能找出我缺少的内容吗

MyComponent.js

import React,{Component} from 'react';

class MyComponent extends Component{
state={
   data:{
       name:'',
       subject:''  
   }
}

 onChange = e =>
    this.setState({
        data: { ...this.state.data, [e.target.name]: e.target.value }
    },()=>{
        console.log(this.state.data);
    }
    )

render(){
const {data}=this.state;
const subjects= [
              {text: '1',value: 'kannada'},
              {text: '2', value: 'english'},
              {text: '3',value: 'hindhi'}
            ]
return(
<div>
            <Input 
             name="name"
             onChange={this.onChange} 
             placeholder='Your name ...' 
            />
            <Dropdown 
             placeholder='Select Subject'
             name="subject"
             onChange={this.onChange}
             selection 
             options={subjects} 
             />
</div>

)
}
}
export default MyComponent;

import React，{Component}来自'React'；
类MyComponent扩展组件{
陈述={
数据：{
名称：“”，
主题：“”
}
}
onChange=e=>
这是我的国家({
数据：{…this.state.data[e.target.name]：e.target.value}
},()=>{
console.log（this.state.data）；
}
)
render（）{
const{data}=this.state；
常量主题=[
{文本：'1'，值：'kannada'}，
{文本：'2'，值：'english'}，
{文本：'3'，值：'hindhi'}
]
返回(
)
}
}
导出默认MyComponent；

如何在状态？中选择下拉列表值，iam正在更改名称字段的值，但下拉列表未获得

handleChange = (e, { value }) => this.setState({ value })

将值道具添加到下拉列表中

      render(
          const { value } = this.state;
        return(
         <Dropdown 
         placeholder='Select Subject'
         name="subject"
         onChange={this.handleChange}
         selection 
         options={subjects} 
         value={value}
         />)
       )

渲染(
const{value}=this.state；
返回(
)
)

在React语义中使用下拉列表的另一种方法。它对我非常有效

const options = [
    { key: 'ex1', text: 'Example 1', value: 'Example 1' },
    { key: 'ex2', text: 'Example 2', value: 'Example 2' },
]

设置值的方法

handleSelectChange=(e,{value})=>this.setState({stateValue:value})

形式上

<Form.Select fluid label='List Example' options={options}
placeholder='List Example' 
value={value} 
onChange={this.handleSelectChange} />

---

您也可以使用表单.Field。
更多

构造函数（道具）{
超级（道具）；
这个州={
主题：“
}
}
handleChange=（e，结果）=>{
常量{name，value}=result；
这是我的国家({
[名称]：值
});
};
render（）{
常量选项=[
{key:'ex1'，text:'Example 1'，value:'Example 1'}，
{key:'ex2'，text:'Example 2'，value:'Example 2'}，
];
返回(
);
}

如果有人在使用react挂钩和语义ui react，我就是这样让它工作的，而不必为它创建单独的更改处理程序函数

const options = [
    { key: "1", text: "Speaker", value: "SPEAKER" },
    { key: "2", text: "Event Planner", value: "EVENT_PLANNER" }
  ];

const [values, setValues] = useState({
    firstName: "",
    userType: ""
  });

const onChange = (event, result) => {
    const { name, value } = result || event.target;
    setValues({ ...values, [name]: value });
  };

<Form.Dropdown
  placeholder="I am a.."
  name="userType"
  label="User Type"
  selection
  onChange={onChange}
  options={options}
  value={values.userType}
  />

const选项=[
{键：“1”，文本：“演讲者”，值：“演讲者”}，
{键：“2”，文本：“事件策划人”，值：“事件策划人”}
];
const[values，setValues]=useState({
名字：“，
用户类型：“
});
const onChange=（事件、结果）=>{
const{name，value}=result | | event.target；
setValues（{…values，[名称]：value}）；
};

---

让我不快的是onChange函数作为参数的“结果”。由于选项存储为数组中的对象，因此访问其值的正确方法是使用“结果”而不是“事件.目标”。

我也尝试过将值属性添加到下拉列表中，即使我没有正确设置名称字段值的值属性，如果下拉菜单不起作用。是的，但是你的句柄更改函数仍然显示语法错误。handleChange=（e，{value}）=>this.setState（{value}）这对我起作用了，现在我在“this.state.value”中下拉选择了值。键呢。有没有办法拿到onChange活动的钥匙？谢谢Sameer！文档有点隐藏：

const options = [
    { key: "1", text: "Speaker", value: "SPEAKER" },
    { key: "2", text: "Event Planner", value: "EVENT_PLANNER" }
  ];

const [values, setValues] = useState({
    firstName: "",
    userType: ""
  });

const onChange = (event, result) => {
    const { name, value } = result || event.target;
    setValues({ ...values, [name]: value });
  };

<Form.Dropdown
  placeholder="I am a.."
  name="userType"
  label="User Type"
  selection
  onChange={onChange}
  options={options}
  value={values.userType}
  />