子フォームコンポーネントReactJSから小道具を入手

Question

初めての方はReactです。

複数の（状態に基づいて）入力ボックスを含むコンポーネントArrayInputを作成しています。

ArrayInputは、各入力ボックスのonChangeイベントを処理する必要があります。

私は多くの記事やドキュメントを検索しますが、正しい方法を見つけることができませんこれらの劇的生成された入力ボックス

上のいくつかの特定の小道具/属性（この場合は、「インデックス」）を取得することを願っています。

this.ref[inputBoxRef]（反応14+）を使用して実際のDOMノードを取得できますが、$(domnode).attr('index')または$(domnode).data('index')を使用すると、属性またはデータがないことがわかります。

window.ArrayInput = React.createClass({ 

      ......other methods 

      handleChange:function(ref,event){ 
       var domInputBox = this.refs[ref]; 
       //trying to get the index attribute of this input 
      } 

      render:function(){ 
       var self = this; 
       return (
        <div className="input-wrapper" >        
         <label> 
          <div>{this.props.label}</div> 

          { 
           this.state.value.map(function(e,i){ 
            return (       
             <input type="text" 
              ref={"arrayBox"+i} 
              key={"arrayBox"+i} 
              index={i} //custom attribute 
              value={e} 
              onChange={self.handleChange.bind(self,"arrayBox"+i)} 
             /> 
            ) 
           }) 
          } 

         </label> 
        </div> 
       ) 
      } 
    }); 

Answer 1

いつもevent.targetを使用できます。試してくださいevent.target.index。

Answer 2

<input>（小文字を使用）は標準のHTMLコンポーネントです。

おそらく、反応の中でこれらのコンポーネントにカスタム属性を置くことを避けることをお勧めします。
実際には、反応自体の中で受け渡しが可能なデータでDOMを不必要にポーリングしているためです。また、DOMへの反応からデータを取得するために再度DOMを読み取ることに反応するのは長い間の旅です。

あなたはhandleChange内index変数を知りたい場合は、ハンドラへの呼び出しにバインドし、よう：

onChange={self.handleChange.bind(self,i)} 

とあなたがあなたのハンドラの定義を変更する場合：取得するには

handleChange:function(element,i){ 
    console.log(element.value); // outputs value of element that changed 
    console.log(i);    // outputs the index of the element that changed 

アイテムの値（または他のDOM属性）、およびインデックスにアクセスします。