テーブルの行をクリックして行情報を取得しようとしていますreactJS

Question

ReactJSで、特定のAPIを呼び出してJSON配列で動作する単純なアプリケーションを構築しています。次に、配列の結果を表に取り込みます。私が今したいのは、テーブル内の任意の行をクリックし、それらの値を他のコンポーネントに渡すことです。私はonClickを使用して行情報を取得する方法が不思議です。

ここに私のコードです。

class ParentComponent extends Component { 

constructor(props){ 
    super(props); 
    this.state = {data: []}; 
} 


componentDidMount() { 
    fetch('http://hostname:xxxx/yyyy/zzzz') 
    .then(function(response) { 
    return response.json(); 
    }) 
    .then(items=>this.setState({data: items})); 
} 

fetchAccountDetails() { 

} 

render(){ 
var newdata = this.state.data; 

     return (
      <table className="m-table"> 
       <thead> 
         <tr> 
          <th>AccountName</th> 
          <th>ContractValue</th> 
         </tr> 
        </thead> 
       <tbody> 
        { 
         newdata.map(function(account, index){ 
         return (
          <tr key={index} data-item={account} onClick={this.fetchAccountDetails()}> 
          <td data-title="Account">{account.accountname}</td> 
          <td data-title="Value">{account.negotiatedcontractvalue}</td> 
          </tr> 
          ) 
          } 
         ) 
        } 
       </tbody> 
       </table> 
      ); 
     } 
    } 

export default ParentComponent; 

Answer 1

は、状態要素のインデックスを渡しから取得したいそれを使用することができます

fetchAccountDetails (event) { 

Account:event.target.value 
this.getData(Account); 
} 

getData: function(var account) 
this.setState({ 
     state: account 
    }); 

を使用して値をフェッチ状態アレイ。また、マッピングする前に状態を別の変数にコピーする必要はありません。状態自体でそれを行うこともできます。

render(){ 

    return (
     <table className="m-table"> 
      <thead> 
        <tr> 
         <th>AccountName</th> 
         <th>ContractValue</th> 
        </tr> 
       </thead> 
      <tbody> 
       { 
        this.state.data.map((account, index) => { 
        return (
         <tr key={index} data-item={account} onClick={() => this.fetchAccountDetails(index)}> 
         <td data-title="Account">{account.accountname}</td> 
         <td data-title="Value">{account.negotiatedcontractvalue}</td> 
         </tr> 
         ) 
         } 
        ) 
       } 
      </tbody> 
      </table> 
     ); 
    } 
} 

fetchAccountDetails(index) { 
    var values = this.state.data[index]; 
    console.log(values); 
} 

Answer 2

今、あなたは状態のように設定してデータを持っている、あなたはどこでもあなたはヨーヨー