React：如何将值从孙子通过孩子传递给父母？答案

【问题标题】：React : How to pass values from grandchild through child to parent?React：如何将值从孙子通过孩子传递给父母？
【发布时间】：2023-07-05 21:07:01
【问题描述】：

我有一个父、子和孙子组件。我有不同的输入字段，并希望将值从孙子传递给子代到父代，最终我用这些值设置状态。我没有包含我所有的代码，但是这样做是必要的，因为我的代码中有其他东西，我没有在这篇文章中包含它，因为它无关紧要。我不知道该怎么做，并试图实现我在网上找到的东西，但是，它不起作用。有任何想法吗？谢谢！！

class Parent extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
        input: {}
    };
    this.changeName = this.changeName.bind(this);
    this.handleInput = this.handleInput.bind(this);
}

changeName(newName) {
    this.setState({
        name: newName
    });
}
handleInput() {
    console.log("helloooooo", this.state.name)
}

render() {
    return (
        <div>
            <Child onChange={this.changeName} onClick={this.handleInput}/>
        </div>
    )
}
}

class Child extends React.Component {

 constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleInput2 = this.handleInput2.bind(this);
}

handleChange(e) {
    this.props.handleChange(e);
}

handleInput2() {
    this.props.onClick()
}

render() {
    return (
        <div>
            <GrandChild onChange={this.handleChange}/>
            <input type="submit" onClick={this.handleInput2}/>
        </div>
        )
}
}

class GrandChild extends React.Component {

 constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleInput2 = this.handleInput2.bind(this);
}

handleChange(e) {
    const input = this.props.input;
    input[name] = e.target.value;
}

render() {
    return (
        <div>
            <input name="firstname" onChange={this.handleChange}/>
            <input name="lastname" onChange={this.handleChange}/>
        </div>
    )
}

【问题讨论】：

这打破了组件隔离的很大一部分。组合组件不应该与父组件通信，它们甚至不应该“知道”父组件。父母可以控制孩子，但不能反过来。

标签： javascript reactjs

【解决方案1】：

在现实生活中，一切都变得更容易。对于您回答以下问题的每个组件。

组件将接收什么数据？它会发出任何事件吗？

这是组件的props。

所以无论你的组件之间的关系如何......只要回答这些问题，你就会很好。

示例：

我有一个TodoList，其中包含TodoItem 元素的列表。（家长）

我有一个TodoItem，它显示了 TodoItem 的内容。（儿童）

我有一个显示复选框的Checkbox。（孙子）

a CheckBox 接收一个布尔值 isSelected 并发出和事件 onChange。这就是我所知道的一切。

TodoItem 接收Todo 并发出onChange。这就是我所关心的。

当你把所有东西放在一起时，TodoList 有一个todos，并将todos[i] 传递给它的孩子，将todos[i].isSelected 传递给它的孙子，但这就是你不需要关心的。所有你关心的是：

组件将接收什么数据？它会发出任何事件吗？

在组件级别。

【讨论】：