複数のReact要素への参照によるアクセス

Question

Reactを使用して複数のデータをarray.mapでレンダリングしています。
クリックしたボタンをリストから無効にするにはどうすればよいですか？

これは私のコードです：動作しませんrefsを使用して

onRunClick(act, e) { 
    this.refs.btn.setAttribute("disabled", true); 
    } 

    render() { 
    return (
     <div> 
     { 
      this.state.acts.map((act) => { 
      let boundActRunClick = this.onRunClick.bind(this, act); 

      return (
       <p key={act._id}> 
       Name: {act.name}, URL(s): {act.urls} 
       <button ref='btn' onClick={boundActRunClick}>Run</button> 
       </p> 
      ) 
      }) 
     } 
     </div> 
    ); 
    } 
} 

...私は複数のボタンがあるので、私は状態を追加することはできませんと思います。

Answer 1

あなたが代わりにREFのref callbackを使用する必要がありますし、またそう、あなたが複数のREFを必要とする、配列はドキュメントによると

良いことがあります：

が反応しますが、いずれにも取り付けることができ、特別な属性をサポートしています コンポーネント。 ref属性はcallback関数を受け取り、 callbackは、コンポーネントが実装された直後に実行されるか、または またはアンマウントされます。

HTML要素でref属性を使用すると、ref callback は引数として基になるDOM要素を受け取ります。 または componentDidUpdateライフサイクルフックの前に呼び出されます

クラスのプロパティを設定するためにrefコールバックを使用するのは、DOM要素にアクセスするための共通の パターンです。好ましい方法は、上記の例のようにrefコールバックに プロパティを設定することです。

レガシーAPI：文字列の参考文献

もしref={input => this.textInput = input}.

文字列、参考文献は、docsあたりなどのレガシーとしている：それを書くために短い方法がさえ ありあなたは以前のReactで作業していましたが、ref35属性が文字列（textInputなど）で、DOMの場合は、古い APIをよく知っている可能性がありますノードはthis.refs.textInputとしてアクセスされます。 文字列の参照にはいくつかの問題があり、従来と見なされており、将来のリリースでは が削除される可能性があるため、 に対してこれを行うことをお勧めします。 の場合、現在this.refs.textInputにアクセスしてrefsにアクセスしている場合は、代わりに コールバックパターンを使用することをおすすめします。 @ ShubhamKhatriの答えのように

constructor() { 
    super(); 
    this.btn = []; 
} 
onRunClick(act, index, e) { 
    this.btn[index].setAttribute("disabled", true); 
    } 

    render() { 
    return (
     <div> 
     { 
      this.state.acts.map((act, index) => { 
      let boundActRunClick = this.onRunClick.bind(this, act, index); 

      return (
       <p key={act._id}> 
       Name: {act.name}, URL(s): {act.urls} 
       <button ref={(ref) => this.btn[index] = ref} onClick={boundActRunClick}>Run</button> 
       </p> 
      ) 
      }) 
     } 
     </div> 
    ); 
    } 

Answer 2

refを使用するオプションです。また、状態でも望ましい動作を達成することができます。e.target` `について

例（シングル無効ボタンオプション）

class App extends Component{ 
    constructor() { 
    super(); 
    this.state = { 
     disabled: '' 
    }; 
    } 

    onRunClick(act, index, e) { 
    this.setState({ disabled: act._id }); 
    } 

    render() { 
    return (
     <div> 
     { 
      this.state.acts.map((act, index) => { 
      let boundActRunClick = this.onRunClick.bind(this, act, index); 
      return (
       <p key={act._id}> 
       Name: {act.name}, URL(s): {act.urls} 
       <button disabled={this.state.disabled === act._id} onClick={boundActRunClick}>Run</button> 
       </p> 
      ) 
      }) 
     } 
     </div> 
    ); 
    } 
} 

例（複数の無効なボタンオプション）

class App extends Component{ 
    constructor() { 
    super(); 
    this.state = { 
     buttons: {} 
    }; 
    } 

    onRunClick(act, index, e) { 
    this.setState((prevState) => { 
     const buttons = Object.assign({}, prevState.buttons, { [act._id]: !prevState.buttons[act._id] }); 
     return { buttons }; 
    }); 
    } 

    render() { 
    return (
     <div> 
     { 
      this.state.acts.map((act, index) => { 
      let boundActRunClick = this.onRunClick.bind(this, act, index); 
      return (
       <p key={act._id}> 
       Name: {act.name}, URL(s): {act.urls} 
       <button disabled={this.state.buttons[act._id] || false} onClick={boundActRunClick}>Run</button> 
       </p> 
      ) 
      }) 
     } 
     </div> 
    ); 
    } 
}