が反応 - すべての変更で

Question

<ul> 
 
    { 
 
     this.state.pics ? this.state.pics.map((pic, index) => { 
 
      return (
 
       <li key={index}> 
 
        <img src={pic.url} height="200" alt="Image preview..." /> 
 
        <select data-id={index} onChange={this.setValue}> 
 
         <option value="1" >Monday</option> 
 
         <option value="2">Tuesday</option> 
 
         <option value="3">Wednesday</option> 
 
         <option value="4">Thursday</option> 
 
         <option value="4">Friday</option> 
 
         <option value="4">Saturday</option> 
 
         <option value="4">Sunday</option> 
 
        </select> 
 
       </li> 
 
      ) 
 
     }) : "" 
 
    } 
 
</ul>

ダウンの選択ドロップで親属性値を取得するにはどのように、私は、インデックスの値に過ぎませんデータ-id属性の値を取得したいと思います。またはliのキー属性の値に直接アクセスする方法があります。私は反応を使用しています。直接クエリセレクタによりDOMにアクセスするために反応し

Answer 1

アパート（あなたのケースでは）イベントのAPI経由でDOMにアクセスするための純粋なJSベースのソリューションから、あなたもRefs feature of React

を使用することができます。しかしドキュメントとして自らは何のためにレフリーを使用して

回避を言います宣言的に行うことができます。 select要素のカスタム属性にアクセスして、あなたの場合は

は、

1. 非常に簡単です、あなたがDOM

2. がある変数に代入アクセスしたい要素に参照を作成します。イベントコールバックでアクセス可能

3. 関数内のDOM参照を持つ変数にアクセスします。

   <select ref={select => (this.selectElement = select)} data-id={1} onChange={this.setValue}>

サンプルはCodeSandox link

でここに見つけることができ、あなたの他の質問「直接クエリセレクタによりDOMにアクセスするために反応しても、それは良い習慣です」と答えるために - 私は最後の手段としてそれを使用すると言っていますが、コンポーネントの階層構造の小道具や州を移動することで、ほとんどの問題を解決できます。

推奨読書

1. Lifting State Up
2. Thinking in React

の

Answer 2

あなたはのonChangeコールバックがアクセスするために使用することができ、通常のJavaScriptのイベントオブジェクトを取得します。この$(this).parent().attr('data-id');

Answer 3

const setValue = (e) => { 
console.log(e.target.getAttribute('data-id')) 
} 

ような何かを試みることができるにもそれは良い習慣ですあなたが望む属性。