web-dev-qa-db-fra.com

Événement OnChange utilisant React JS pour la liste déroulante

var MySelect = React.createClass({
     change: function(){
         return document.querySelector('#lang').value;
     },
     render: function(){
        return(
           <div>
               <select id="lang">
                  <option value="select" onChange={this.change}>Select</option>
                  <option value="Java" onChange={this.change}>Java</option>
                  <option value="C++" onChange={this.change}>C++</option>
               </select>
               <p></p>
               <p value={this.change}></p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

L'événement onChange ne fonctionne pas.

javascriptreactjs
117
user544079

L'événement de modification est déclenché sur l'élément <select>, et non sur l'élément <option>. Cependant, ce n'est pas le seul problème. La façon dont vous avez défini la fonction change ne provoque pas de restitution du composant. Il semble que vous n’ayez peut-être pas encore bien compris le concept de React, alors peut-être que "Penser en réaction" aide.

Vous devez stocker la valeur sélectionnée en tant qu'état et mettre à jour l'état lorsque la valeur change. La mise à jour de l'état déclenchera la réémission du composant.

var MySelect = React.createClass({
     getInitialState: function() {
         return {
             value: 'select'
         }
     },
     change: function(event){
         this.setState({value: event.target.value});
     },
     render: function(){
        return(
           <div>
               <select id="lang" onChange={this.change} value={this.state.value}>
                  <option value="select">Select</option>
                  <option value="Java">Java</option>
                  <option value="C++">C++</option>
               </select>
               <p></p>
               <p>{this.state.value}</p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

Notez également que les éléments <p> n'ont pas d'attribut value. React/JSX reproduit simplement la syntaxe HTML bien connue, il n'introduit pas d'attributs personnalisés (à l'exception de key et ref). Si vous voulez que la valeur sélectionnée soit le contenu de l'élément <p>, insérez-la simplement à l'intérieur, comme vous le feriez avec n'importe quel contenu statique.

En savoir plus sur la gestion des événements, les contrôles d'état et de formulaire:

249
Felix Kling
import React, { PureComponent, Fragment } from 'react';
import ReactDOM from 'react-dom';

class Select extends PureComponent {
  state = {
    options: [
      {
        name: 'Select…',
        value: null,
      },
      {
        name: 'A',
        value: 'a',
      },
      {
        name: 'B',
        value: 'b',
      },
      {
        name: 'C',
        value: 'c',
      },
    ],
    value: '?',
  };

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  render() {
    const { options, value } = this.state;

    return (
      <Fragment>
        <select onChange={this.handleChange} value={value}>
          {options.map(item => (
            <option key={item.value} value={item.value}>
              {item.name}
            </option>
          ))}
        </select>
        <h1>Favorite letter: {value}</h1>
      </Fragment>
    );
  }
}

ReactDOM.render(<Select />, window.document.body);
31
Kirk Strobeck

Merci Felix Kling, mais sa réponse nécessite un peu de changement:

var MySelect = React.createClass({
 getInitialState: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     this.setState({value: event.target.value});
 },
 render: function(){
    return(
       <div>
           <select id="lang" onChange={this.change.bind(this)} value={this.state.value}>
              <option value="select">Select</option>
              <option value="Java">Java</option>
              <option value="C++">C++</option>
           </select>
           <p></p>
           <p>{this.state.value}</p>
       </div>
    );
 }
});
React.render(<MySelect />, document.body);
1
Abolfazl Miadian

Crochets à réaction (16.8 +):

const Dropdown = ({
  options
}) => {
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => setSelectedOption(e.target.value)}>
        {options.map(o => (
          <option value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};
0
ahota