web-dev-qa-db-ja.com

セマンティックUI反応ドロップダウン値を状態に設定

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;

状態でドロップダウン値を選択するにはどうすればよいですか？.

reactjssemantic-uisemantic-ui-react
7
Srikanth Gowda
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}
         />)
       )
9
Omar

DropDownをReact Semanticで使用するもう1つの方法です。完全に機能しました。

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} />
1
Hirak JD

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>
  );
}
0
Shubham Chadokar

誰かが反応フックとセマンティック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関数が引数として取る「結果」でした。オプションはオブジェクトとして配列に格納されるため、それらの値にアクセスする正しい方法は、「event.target」ではなく「result」を使用することです。

0
Sameer Ingavale