嘗試獲取有關在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

傳遞狀態元素的索引並從狀態數組中檢索。 同樣，在映射之前不需要將狀態復制到另一個變量，您可以使用狀態本身來完成

 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

使用獲取值

fetchAccountDetails (event) {

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

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

現在您已經將數據設置為狀態，並且可以在任何需要的地方使用它了。