将onClick事件添加到 <tr> 在React中

Question

我有一个<Table /> ，它用来自对象数组的数据动态填充。 我想向<TableRow />添加一个onClick事件，以便可以更新该行中的数据。 onClick事件似乎没有调用我的openBookDetails函数。

import React, { Component } from 'react';
import './Update.css';
import Search from '../Search/Search';

const Table = ({ data }) => (
    <table class="table table-hover">
        <thead>
            <tr class="table-primary">
                <th scope="col">Title</th>
                <th scope="col">Author</th>
                <th scope="col">ISBN</th>
                <th scope="col">No. Of Copies</th>
            </tr>
        </thead>
        <tbody>
            {data.map(row => 
                <TableRow key={row.id} row={row} />
            )}

        </tbody>
    </table>
)

const TableRow = ({ row }) => (
     <tr class="table-light" onClick={this.openBookDetails}>
        <th scope="row" >{row.title}</th>
        <td >{row.author}</td>
        <td >{row.isbn}</td>
        <td >24</td>
    </tr>
)


class Update extends Component{
    constructor(props) {
        super(props);

        this.state = {
            value: '',
            suggestions: [],
            setOfAllBooks: [],
            searchedBooks: []
        };

        this.openBookDetails = this.openBookDetails.bind(this);
        this.setTableData = this.setTableData.bind(this);
    }

    setTableData(searchedBook){
        this.setState({searchedBooks: searchedBook})

        console.log(this.state.searchedBooks)
    }

    openBookDetails(){
        console.log("openBookDetails")
    }

    render(){
        return(
            <div>
                <Search state={this.state} setTableData={this.setTableData} />
                <Table data={this.state.searchedBooks} />
            </div>

        )
    }
}

export default Update;

Answer 1

你的TableRow组件是一个无状态（presentional）组件 ，所以你不能用this里面它。 openBookDetails函数位于类组件Update中，因此它不在TableRow中，而在Table的父级：Update中。

您需要将openBookDetails函数作为道具从Update传递到Table，然后从Table传递到TableRow

Answer 2

您应该将函数作为道具发送给子组件。

import React, { Component } from 'react';
import './Update.css';
import Search from '../Search/Search';

const Table = ({ data, action }) => (
    <table class="table table-hover">
        <thead>
            <tr class="table-primary">
                <th scope="col">Title</th>
                <th scope="col">Author</th>
                <th scope="col">ISBN</th>
                <th scope="col">No. Of Copies</th>
            </tr>
        </thead>
        <tbody>
            {data.map(row => 
                <TableRow key={row.id} row={row} action={action} />
            )}

        </tbody>
    </table>
)

const TableRow = ({ row, action }) => (
    <tr class="table-light" onClick={action()}>
        <th scope="row" >{row.title}</th>
        <td >{row.author}</td>
        <td >{row.isbn}</td>
        <td >24</td>
    </tr>
)


class Update extends Component{
    constructor(props) {
        super(props);

        this.state = {
            value: '',
            suggestions: [],
            setOfAllBooks: [],
            searchedBooks: []
        };

        this.openBookDetails = this.openBookDetails.bind(this);
        this.setTableData = this.setTableData.bind(this);
    }

    setTableData(searchedBook){
        this.setState({searchedBooks: searchedBook})

        console.log(this.state.searchedBooks)
    }

    openBookDetails(){
        console.log("openBookDetails")
    }

    render(){
        return(
            <div>
                <Search state={this.state} setTableData={this.setTableData} />
                <Table data={this.state.searchedBooks} action={this.openBookDetails} />
            </div>

        )
    }
}

export default Update;