React JSX: sélection de «sélectionné» sur l'option <sélectionner> sélectionnée

Dans un composant React pour un <select>menu, je dois définir l' selectedattribut sur l'option qui reflète l'état de l'application.

Dans render(), le optionStateest transmis du propriétaire de l'État au composant SortMenu. Les valeurs des options sont transmises à partir propsde JSON.

render: function() {
  var options = [],
      optionState = this.props.optionState;

  this.props.options.forEach(function(option) {
    var selected = (optionState === option.value) ? ' selected' : '';

    options.push(
      <option value={option.value}{selected}>{option.label}</option>
    );
  });

// pass {options} to the select menu jsx

Cependant, cela déclenche une erreur de syntaxe lors de la compilation JSX.

Cela supprime l'erreur de syntaxe mais ne résout évidemment pas le problème:

var selected = (optionState === option.value) ? 'selected' : 'false';

<option value={option.value} selected={selected}>{option.label}</option>

J'ai également essayé ceci:

var selected = (optionState === option.value) ? true : false;

<option value={option.value} {selected ? 'selected' : ''}>{option.label}</option>

Existe-t-il un moyen recommandé de résoudre ce problème?

React comprend automatiquement les booléens à cet effet, vous pouvez donc simplement écrire (remarque: non recommandé)

<option value={option.value} selected={optionsState == option.value}>{option.label}</option>

et il sortira «sélectionné» de manière appropriée.

Cependant, React vous facilite la tâche. Au lieu de définir selectedsur chaque option, vous pouvez (et devriez) simplement écrire value={optionsState}sur la balise select elle - même :

<select value={optionsState}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

Pour plus d'informations, consultez le document React select tag .

Vous pouvez faire ce que React vous avertit lorsque vous essayez de définir la propriété "sélectionnée" de <option>:

Utilisez le defaultValueou valueaccessoires à la <select>place de la fixation selectedsur <option>.

Ainsi, vous pouvez utiliser options.valuesur defaultValuevotre choix

Voici une solution complète qui incorpore la meilleure réponse et les commentaires ci-dessous (qui pourraient aider quelqu'un qui a du mal à tout reconstituer):

MISE À JOUR POUR ES6 (2019) - Utilisation des fonctions fléchées et de la déstructuration d'objets

dans le composant principal:

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    this.state = { fruit: props.item.fruit };
  }

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

  saveItem = () => {
    const item = {};
    item.fruit = this.state.fruit;
    // do more with item object as required (e.g. save to database)
  }

  render() {
    return (
      <ReactExample name="fruit" value={this.state.fruit} handleChange={this.handleChange} />
    )
  }

}

composant inclus (qui est maintenant une fonction sans état):

export const ReactExample = ({ name, value, handleChange }) => (
  <select name={name} value={value} onChange={handleChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
)

RÉPONSE PRÉCÉDENTE (à l'aide de bind):

dans le composant principal:

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    // bind once here, better than multiple times in render
    this.handleChange = this.handleChange.bind(this);
    this.state = { fruit: props.item.fruit };
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem() {
    const item = {};
    item.fruit = this.state.fruit;
    // do more with item object as required (e.g. save to database)
  }

  render() {
    return (
      <ReactExample name="fruit" value={this.state.fruit} handleChange={this.handleChange} />
    )
  }

}

composant inclus (qui est maintenant une fonction sans état):

export const ReactExample = (props) => (
  <select name={props.name} value={props.value} onChange={props.handleChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
)

le composant principal conserve la valeur sélectionnée pour les fruits (en état), le composant inclus affiche l'élément sélectionné et les mises à jour sont retransmises au composant principal pour mettre à jour son état (qui revient ensuite au composant inclus pour modifier la valeur sélectionnée).

Notez l'utilisation d'un accessoire de nom qui vous permet de déclarer une seule méthode handleChange pour les autres champs du même formulaire, quel que soit leur type.

Voici le dernier exemple de la façon de procéder. À partir de React Docs , plus la syntaxe de la méthode de liaison automatique "Fat-Arrow".

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
  }

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

  handleSubmit = (event) => {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
} 

Ajoutez simplement la première option de votre balise de sélection:

<option disabled hidden value=''></option>

Cela deviendra par défaut et lorsque vous sélectionnerez une option valide sera réglée sur votre état

***Html:***
<div id="divContainer"></div>

var colors = [{ Name: 'Red' }, { Name: 'Green' }, { Name: 'Blue' }];
var selectedColor = 'Green';

ReactDOM.render(<Container></Container>, document.getElementById("divContainer"));

var Container = React.createClass({
    render: function () {
        return (
        <div>            
            <DropDown data={colors} Selected={selectedColor}></DropDown>
        </div>);
    }
});

***Option 1:***
var DropDown = React.createClass(
{
    render: function () {
        var items = this.props.data;
        return (
        <select value={this.props.Selected}>
            {
                items.map(function (item) {
                    return <option value={item.Name }>{item.Name}</option>;
                })
            }
        </select>);
    }
});

***Option 2:***
var DropDown = React.createClass(
{
    render: function () {
        var items = this.props.data;
        return (
        <select>
            {
                items.map(function (item) {
                    return <option value={item.Name} selected={selectedItem == item.Name}>{item.Name}</option>;
                })
            }
        </select>);
    }
});

***Option 3:***
var DropDown = React.createClass(
    {
        render: function () {
            var items = this.props.data;
            return (
            <select>
                {
                    items.map(function (item) {

                                            if (selectedItem == item.Name)
                    return <option value={item.Name } selected>{item.Name}</option>;
                else
                    return <option value={item.Name }>{item.Name}</option>;
                    })
                }
            </select>);
        }
    });

J'ai rencontré un problème avec les <select>balises qui ne se mettent pas à jour correctement <option>lorsque l'état change. Mon problème semblait être que si vous effectuez deux rendus successifs rapidement, la première fois sans présélection <option>mais la deuxième fois avec un, le<select> balise ne se met pas à jour sur le deuxième rendu, mais reste sur la valeur par défaut en premier.

J'ai trouvé une solution à cela en utilisant des références . Vous devez obtenir une référence à votre <select>nœud de balise (qui peut être imbriqué dans certains composants), puis mettre à jour manuellement la valuepropriété sur celui-ci, dans le componentDidUpdatecrochet.

componentDidUpdate(){
  let selectNode = React.findDOMNode(this.refs.selectingComponent.refs.selectTag);
  selectNode.value = this.state.someValue;
}

Publier une réponse similaire pour MULTISELECT / optgroups:

render() {
  return(
    <div>
      <select defaultValue="1" onChange={(e) => this.props.changeHandler(e.target.value) }>
        <option disabled="disabled" value="1" hidden="hidden">-- Select --</option>
        <optgroup label="Group 1">
          {options1}
        </optgroup>
        <optgroup label="Group 2">
          {options2}
        </optgroup>
      </select>
    </div>
  )
}

J'ai une solution simple en suivant le HTML de base.

<input
  type="select"
  defaultValue=""
  >
  <option value="" disabled className="text-hide">Please select</option>
  <option>value1</option>
  <option>value1</option>
</input>

.text-hide est une classe bootstrap, si vous n'utilisez pas bootstrap, vous êtes ici:

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

J'ai résolu un problème similaire en définissant defaultProps:

ComponentName.defaultProps = {
  propName: ''
}

<select value="this.props.propName" ...

Alors maintenant j'évite les erreurs de compilation si mon accessoire n'existe pas avant le montage.