React.js-将状态值从一个组件传递到另一个
我有两个组件SideNav和Dashboard(两个位于不同的js文件中)。SideNav将具有选择框作为过滤器。我必须将一个数组从仪表板组件传递到补充工具栏组件。该数组必须作为选择框的值(在sidenav组件内部)给出。
PS: 如果在两个不同的JS文件中定义了两个不同的组件类,情况将会怎样。例如HomeComponent /
Home.js->父组件Dashboard / Dashboard.js->子组件我正在对“
Home.js”文件进行API调用并获取一些数据。我想将这些数据传递到“
Dashboard.js”文件(组件)我研究的所有示例均在同一JS文件中显示了两个组件。
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {viz:{},filterData:{}};
}
var data1= ['1','2','3'];
this.setState({data1: data1}, function () {
console.log(this.state.data1);
});
}
//Sidebar
class Sidebar extends Component {
constructor(props) {
super(props);
this.state = {
data: ['opt1','opt2']
};
}
handleClick(e) {
e.preventDefault();
e.target.parentElement.classList.toggle('open');
this.setState({data: this.state.data1}, function () {
console.log(this.state.data);
});
}
render() {
const props = this.props;
const handleClick = this.handleClick;
return (
<div className="sidebar">
<nav className="sidebar-nav">
<Nav>
<li className="nav-item nav-dropdown">
<p className="nav-link nav-dropdown-toggle" onClick={handleClick.bind(this)}>Global</p>
<ul className="nav-dropdown-items">
<li> Organization <br/>
<select className="form-control">
<option value="">Select </option>
{this.state.data.map(function (option,key) {
return <option key={key}>{option}</option>;
})}
</select>
-
如果必须将状态从仪表板传递到侧边栏,则必须从仪表板的渲染功能渲染侧边栏。在这里,您可以将仪表板的状态传递给补充工具栏。
程式码片段
class Dashboard extends Component { ... ... render(){ return( <Sidebar data={this.state.data1}/> ); } }
如果您希望仪表板接收对传递到边栏的道具(data1)所做的更改,则需要提升状态。即,您必须将功能引用从仪表板传递到补充工具栏。在补充工具栏中,无论何时要将data1传递回仪表板,都必须调用它。代码段。
class Dashboard extends Component { constructor(props){ ... //following is not required if u are using => functions in ES6. this.onData1Changed = this.onData1Changed.bind(this); } ... ... onData1Changed(newData1){ this.setState({data1 : newData1}, ()=>{ console.log('Data 1 changed by Sidebar'); }) } render(){ return( <Sidebar data={this.state.data1} onData1Changed={this.onData1Changed}/> ); } } class Sidebar extends Component { ... //whenever data1 change needs to be sent to Dashboard //note: data1 is a variable available with the changed data this.props.onData1changed(data1); }
参考文档:https :
//facebook.github.io/react/docs/lifting-state-
up.html
-
如何在React或React-Redux中将数据从一个组件传递到另一个组件?
2021-01-31 关注 0 浏览86 1答案
-
React-如何将状态传递给另一个组件
2021-01-31 关注 0 浏览82 1答案
-
如何使用会话将值从一个php页面传递到另一个
2021-02-02 关注 0 浏览118 1答案
-
如何将值从一个jsp传递到另一个jsp页面?
2021-02-01 关注 0 浏览150 1答案
-
React.js:将一个组件包装到另一个组件中
2021-01-31 关注 0 浏览103 1答案
-
在Unity中,如何将值从一个脚本传递到另一个脚本?
2021-02-02 关注 0 浏览159 1答案
-
将所有变量从一个 shell 脚本传递到另一个?
2022-07-28 关注 0 浏览18 1答案
-
如何将变量从一个JFrame传递到另一个
2021-01-30 关注 0 浏览93 1答案
-
如何将数组从一个Servlet传递到另一个Servlet?
2021-01-29 关注 0 浏览126 1答案
-
如何将值从一个jsp传递到另一个jsp以更新数据库
2021-02-01 关注 0 浏览99 1答案