Question

我有一个主要的Table组件，用于维护表的状态。我有一个笨拙的组件，可以从主要组件获取道具。我用它来呈现表行布局。我试图使该表可编辑。因此，我需要一种方法来找出哪个tr被编辑了。有没有办法访问tr key，通过它我可以访问整个对象？

Answer 1

不，您无法获得子道具中键的值。来自docs：

键只是React的提示，但不会传递给您组件。如果您在组件中需要相同的值，请传递它明确地作为具有不同名称的道具

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

可能的解决方法如下：

import React from 'react';


class Table extends React.Component {


    constructor(props) {
        super(props);


        this.state = {
            rows: [
                {
                    id: 0,
                    title: "ABC"
                },
                {
                    id: 1,
                    title: "DEF"
                },
                {
                    id: 2,
                    title: "GHI"
                }
            ]
        }
    }

    render() {
        return <table>
            <tbody>

            {
                this.state.rows.map((item) => <Row key={item.id} item={item} updateItem={this.updateItem} />)
            }

            </tbody>
        </table>
    }

    updateItem = (newItemData) => {
        const index = this.state.rows.findIndex((r) => r.id == newItemData.id);

        let updatedRows = this.state.rows;

        updatedRows.splice(index, 1, newItemData);

        this.setState({
            rows: updatedRows
        });

    }
}


const Row = ({item, updateItem}) => {

    const [title, setValue] = React.useState(item.title);

    return <tr>
        <td>{item.id}</td>
        <td>
            <input type="text" value={title} onChange={(e) => setValue(e.currentTarget.value)} />
        </td>
        <td>
            <button onClick={() => updateItem({...item, title})}>Save</button>
        </td>
    </tr>
};

Answer 2

如果要从嵌套组件发送给父组件，请使用回调函数

ReactJS：如何获取已更改的表行的数据

2 个答案: