Question

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

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

Answer 1

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

该组件将收到哪些数据？   它会发出任何事件吗？

该组件的props。

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

示例：

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

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

我有一个显示复选框的Checkbox。（如GrandChild）

CheckBox收到布尔说isSelected并发出和事件onChange。这就是我所知道的。

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

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

该组件将收到哪些数据？它会发出任何事件吗？

在组件级别。

React：如何将孙子女孩的价值传递给父母？

1 个答案: