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

传递state元素的索引并从state数组中检索。此外，在映射之前不需要将状态复制到另一个变量，您可以使用状态本身

 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
    });

现在您已将数据设置为状态，您可以在任何您想要的地方使用它

尝试获取有关在reactJS中单击表格上的行的行信息

2 个答案: