Comment obtenir la “clé” prop de Réagir élément (à changer)?

Passage clé comme un accessoire fonctionne évidemment, mais beaucoup plus rapide pourrait être d'inclure la clé comme un attribut personnalisé dans votre code html.

JS:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
  }
  onSelect(event) {
    const selectedIndex = event.target.options.selectedIndex;
        console.log(event.target.options[selectedIndex].getAttribute('data-key'));
  }

  render() {
    return ( 
      <div>
      <select onChange = {this.onSelect}>
       <option key="1" data-key="1">One</option> 
       <option key="2" data-key="2">Two</option>             </select> 
     </div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Si vous avez besoin de passer la clé dans le <option> comme un accessoire, mais depuis le <select> est un champ natif et gère les changements en interne, il devient un peu difficile à obtenir que la clé de la valeur de retour.
Permet de démarrer un problème à la fois, en passant de l'hélice dans l'option pourrait être aussi simple que l'habillage de l'option comme tant et à l'aide de la index accessoire comme la nouvelle clé prop.

const CustomOption = ({ value, children, index }) => (
    <option key={index} value={value}>{value}</option>
);

Noter également que nous sommes en train de créer un composant personnalisé wrapper ci-dessus pour avaler le index prop d'être appliquée à <option /> lui-même réagir ne marche pas comme inconnu des accessoires sur des éléments du dom.

Maintenant, si nous pouvions gérer l'événement sélectionné à l'intérieur de l'option de nous serait fait, mais nous ne pouvons pas le faire. nous avons donc besoin de faire un custom sélectionnez ainsi:

class CustomSelect extends React.Component {

    static propTypes = {
        value: PropTypes.object,
        onChange: PropTypes.func,
    }

    handleChanged = (e) => {
        const newValue = e.target.value;
        let newKey;

        //iterate through our children searching for the <CustomOption /> that was just selected
        React.children.forEach(this.children, (c) => {
            if (c.props && c.props.index && c.props.value === newValue) {
                newKey = c.props.key;
            }
        });

        this.props.onChange(e, newKey);
    }

    render() {
        return (
            <select value={this.props.value} onChange={this.handleChanged}>
                {this.props.children}
            </select>
        );
    }
}

il dispose de deux accessoires value, et onChange. Notez que nous intercepter l'événement de changement afin de trouver l'index (la clé) et nous le transmettre à la mère en tant que second paramètre. Ce n'est pas très agréable, mais je ne peux pas penser à un autre moyen facile de faire cela tout en continuant d'utiliser le natif <select> élément.

Remarque: vous devez remplacer vos usages de <select> et <optoin> à l'utilisation de ces nouvelles classes, et d'assigner les index prop avec le key hélice sur l'option.

Imaginer un composant comme ceci:

<Component data={[{id:'a23fjeZ', name="foo"}, ...]}` 

Qui rend une liste d'entrées, et obtient dans un data prop qui est une collection (Tableau de Objets):

function Component ( props ){
    //cached handler per unique key. A self-invoked function with a "cache" object
    const onChange = (cache => param => {
        if( !cache[param] )
            cache[param] = e => 
                console.log(param, e.target.name, e.target.value)

        return cache[param];
    }
    )({});

    return props.data.map(item =>
        <input key={item.id} name={item.name} onChange={onChange(item.id)} />
    }

}

Comme vous pouvez le voir, le key n'est pas accessible, mais il est passé dans un lancer la fonction qui est de la manipulation de la mise en cache à l'intérieur, pour éviter les "sans fin" création de fonctions sur la re-rend.