semantic ui react 将下拉值设置为状态

Question

如何让下拉菜单在 state.here 中选择值是我的代码我正在获取名称字段的值但下拉菜单不起作用，任何人都可以找出我缺少的内容吗？

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;

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

Answer 1

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

向下拉菜单添加 value 属性

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

Answer 2

在 React Semantic 中使用 DropDown 的另一种方式。它非常适合我。

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

Answer 3

您也可以使用 Form.Field。
更多 information。

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

Answer 4

如果有人在使用反应钩子和语义 ui 反应，这就是我让它工作的方式，而无需为其创建单独的更改处理函数。

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.'

semantic ui react 将下拉值设置为状态

semantic ui react Setting dropdown value to state

reactjs

semantic-ui

semantic-ui-react