Javascript 将变量从一个组件传递到另一个组件

我正在编写一个示例ReactJS应用程序，其中我希望将变量从一个组件传递到另一个组件

类布局扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={关键字：'}；
}
render（）{
返回(
);
}
};
ReactDOM.render(
，应用程序
); 

---

在上面的代码中，我想将一个变量从

组件传递到

组件。

您可以使用如下函数

class Layout extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            keyword: '',
            yourVariable: null
        };
    }
    sendVariable(newValue) {
        this.setState({ yourVariable: newValue });
    }
    render() {

        return (
            <div className="wrapper">
                <Search onChange={this.sendVariable.bind(this)} />
                <Listing sendValue={this.state.yourVariable} />
            </div>
        );
    }
};

class Search extends React.Component{
    render(){
        let variable = "";
        return <div onClick={this.porps.onChange(variable)}></div>;
    }
}

类布局扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
关键字：“”，
变量：null
};
}
sendVariable（newValue）{
this.setState（{yourVariable:newValue}）；
}
render（）{
返回(
);
}
};
类搜索扩展了React.Component{
render（）{
设变量=”；
返回；
}
}

---

或者使用。

您可以使用以下功能

class Layout extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            keyword: '',
            yourVariable: null
        };
    }
    sendVariable(newValue) {
        this.setState({ yourVariable: newValue });
    }
    render() {

        return (
            <div className="wrapper">
                <Search onChange={this.sendVariable.bind(this)} />
                <Listing sendValue={this.state.yourVariable} />
            </div>
        );
    }
};

class Search extends React.Component{
    render(){
        let variable = "";
        return <div onClick={this.porps.onChange(variable)}></div>;
    }
}

类布局扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
关键字：“”，
变量：null
};
}
sendVariable（newValue）{
this.setState（{yourVariable:newValue}）；
}
render（）{
返回(
);
}
};
类搜索扩展了React.Component{
render（）{
设变量=”；
返回；
}
}

---

或者使用。

Rlijo您可以按如下方式向组件传递道具：

要在搜索组件中使用props，您可以调用

this.props.paramA

（如果使用类）

按照设置组件的方式，您将无法与列表组件共享搜索组件的状态（即Search中处于this.state的对象）。有些库（如Redux）旨在解决跨组件共享状态的问题

---

道具（或变量或参数）向下流动，因此您需要从父组件提供共享道具。请参见，您可以将this.state.keyword作为一个道具提供给搜索和列表，因为这两个组件位于父组件中。

Rlijo您可以按如下方式将道具传递给组件：

要在搜索组件中使用props，您可以调用

this.props.paramA

（如果使用类）

按照设置组件的方式，您将无法与列表组件共享搜索组件的状态（即Search中处于this.state的对象）。有些库（如Redux）旨在解决跨组件共享状态的问题

---

道具（或变量或参数）向下流动，因此您需要从父组件提供共享道具。请参阅，您可以将this.state.keyword作为搜索和列表的支柱，因为这两个组件位于父组件中。

在您希望将变量传递到

列表时，搜索中发生了什么事件？

的格式非常差：）。有不同的方法来执行此redux、events等操作。有关代码的更多信息将非常有用。@Davintroon组件实际上是一个表单，通过文本输入来输入关键字，我想在表单操作的Submit上传递变量。因此，您需要一个

onSubmit

道具进行

Search

，然后在

Layout

中处理

onSubmit

@Andrew的回答如下。

搜索

中的什么事件发生在您希望将变量传递到

列表

时？代码格式非常糟糕：）。有不同的方法来执行此redux、events等操作。有关代码的更多信息将非常有用。@Davintroon组件实际上是一个表单，通过文本输入来输入关键字，我想在表单操作的Submit上传递变量。因此，您需要一个

onSubmit

道具进行

Search

，然后在

Layout

中处理

onSubmit

@下面是安德鲁的回答。