Semantic UI React：将下拉框的值设置为状态

Question

如何将下拉框的选定值保存在state中。这是我的代码，我可以获取名称字段的值，但下拉框不起作用，有人能找出我缺少了什么吗？

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;

如何将下拉菜单选择的值保存在state中？我已经能够获取名称字段的更改值，但无法获取下拉菜单的更改值。

Translated:

How to save the selected value of a dropdown menu in state? I am able to get the updated value for the name field, but not for the dropdown menu.

- Srikanth Gowda

Answer 1

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}
         />)
       )

- Omar

---

我也尝试过向下拉菜单添加值，即使对于名称字段没有值属性，它也可以正确设置值，但是对于下拉菜单则不起作用。 - Srikanth Gowda

是的，但你的句柄更改函数仍然显示语法错误。 - Srikanth Gowda

handleChange = (e, { value }) => this.setState({ value }) 这对我很有用，现在我有了下拉选择的值，存储在“this.state.value”中。 - Srikanth Gowda

Answer 2

如果有人正在使用React Hooks和Semantic 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}
  />

让我感到困惑的是onChange函数所接收的参数'result'。由于选项以对象数组的形式存储，正确访问它们的值的方式是使用'result'而不是'event.target'。

- Sameer Ingavale

---

关于键，有没有办法在onChange事件中获取键？ - João Pereira

谢谢 Sameer！文档有点隐藏：https://react.semantic-ui.com/modules/dropdown/#usage-controlled - thul

Answer 3

在React Semantic中使用DropDown的另一种方法。对我来说非常完美。

Original Answer翻译成"最初的回答"

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} />

- Hirak JD

Answer 4

你也可以使用 Form.Field。
了解更多信息。

constructor(props) {
   super(props);
   this.state={
      subject : ""
   }
}

handleChange = (e, result) => {
  const { name, value } = result;
  this.setState({
     [name]: value
    });
};

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

  return(
   <div> 
      <Form>
         <Form.Field 
            placeholder="Subject"
            name="subject"
            label="Subject"
            control={Dropdown}
            fluid
            selection
            onChange={this.handleChange}
            options={options}
            value={this.state.subject}
         />
      </Form>     
   </div>
  );
}

- Shubham Chadokar