反応中の要素から「キー」を得るには？

Question

変更時に選択すると、オプションの値とキーを取得します。

のonChangeOption機能でオプションの値のシンプルさを得ることができますが、どのようにキーを取得できますか？

<select 
    onChange={event=>this.onChangeOption(event)} 
    value={this.state.base.country} 
> 
    {this.countryOptionsLoop()} 
</select> 

countryOptionsLoop(){ 
    return(
     this.state.countryOptions.map(
      (item, key) => 
       <option 
        key={key} 
        value={item.value} 
       > 
        {item.name} 
       </option> 
     ) 
    ); 
} 

Answer 1

キーをプロップとして渡すことは明らかですが、はるかに迅速な方法は、htmlのカスタム属性としてキーを含めることです。

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'));

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

Answer 2

あなたは別の小道具としてキーに値を渡す必要があります。ドキュメントから

：

キーが反応することがヒントとなりますが、彼らはあなたのコンポーネントに渡されません。あなたのコンポーネントに同じ値が必要な場合は、別の名前で小道具として明示的にそれを渡します

読む：https://reactjs.org/docs/lists-and-keys.html

Answer 3

ですから、小道具として<option>にキーを渡す必要がありますが、 <select>はネイティブフィールドであり、内部的に変更を処理するので、そのキー値を取り戻すのは少し難しくなります。 一度に1つの問題を開始できます。オプションにコンポーネントをラッピングし、新しいキーの小道具としてindexプロップを使用するだけで簡単にプロップをオプションに渡すことができます。

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

はまた、我々は、DOM要素上の未知の小道具のようにdoesntの反応として<option />自体に適用されることからindex小道具を飲み込むために上記のカスタムコンポーネントラッパーを作成していることに注意してください。

これで、選択したイベントをオプション内で処理できるようになりましたが、それはできません。私たちは、カスタムにも選択させる必要があります。

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> 
     ); 
    } 
} 

、2つの小道具value、そしてonChangeを持っています。インデックス（キー）を見つけるためにchangeイベントをインターセプトし、2番目のパラメータとして親に渡していることに注目してください。これはあまりいいことではありませんが、まだネイティブ<select>要素を使用している間にこれを行うもう1つの簡単な方法は考えられません。

は、あなたがこれらの新しいクラスを使用する<select>と<optoin>のあなたの用法を交換し、オプションのkey小道具と一緒にindex小道具を割り当てる必要があります。