web-dev-qa-db-fra.com

ui réagir sémantique Définition de la valeur de la liste déroulante à l'état

comment avoir des listes déroulantes sélectionnées dans l'état. mon code obtient-il une valeur pour le champ de nom mais la liste déroulante ne fonctionne pas, quelqu'un peut-il savoir ce qui me manque?

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;

comment avoir sélectionné la valeur de la liste déroulante dans l'état?.

reactjssemantic-uisemantic-ui-react
7
Srikanth Gowda
handleChange = (e, { value }) => this.setState({ value })

Ajouter une valeur ajoutée à Dropdown

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

Une autre façon d'utiliser DropDown dans React Semantic. Cela a parfaitement fonctionné pour moi.

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

Méthode pour définir la valeur

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

Informer

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

Vous pouvez également utiliser le Form.Field.
Pour en savoir plus informations .

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

Si quelqu'un utilise des hooks React et que l'interface utilisateur sémantique réagit, c'est comme ça que je l'ai fait fonctionner, sans avoir à créer une fonction de gestionnaire de changement distincte pour cela.

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

Ce qui me déconcertait, c'était le "résultat" que la fonction onChange prend comme argument. Étant donné que les options sont stockées en tant qu'objets dans un tableau, la bonne façon d'accéder à leurs valeurs est avec le "résultat" et non "event.target".

0
Sameer Ingavale