Javascript 我想在react中访问一个组件到另一个组件的状态，我该怎么做
我想将daterangepicker组件的状态访问到barchartcomponent中，我正在仪表板组件中调用daterangepicker组件如何在barchartcomponent的查询url中获取daterangepicker组件的状态 这是我的代码，有人能帮忙吗 DateRangePickerComponent.jsxJavascript 我想在react中访问一个组件到另一个组件的状态，我该怎么做,javascript,jquery,reactjs,bootstrap-4,Javascript,Jquery,Reactjs,Bootstrap 4,我想将daterangepicker组件的状态访问到barchartcomponent中，我正在仪表板组件中调用daterangepicker组件如何在barchartcomponent的查询url中获取daterangepicker组件的状态 这是我的代码，有人能帮忙吗 DateRangePickerComponent.jsx class DaterangePickerComponent extends React.Component { constructor(props)
class DaterangePickerComponent extends React.Component
{
constructor(props)
{
super(props);
this.state =
{
startDate:null,
endDate:null
}
};
componentDidMount()
{
var that =this;
$(document).ready(function(){
$("#dp").daterangepicker(
{ timePicker: true,
timePickerIncrement: 30,
locale: {
format: 'MM/DD/YYYY h:mm A'
},
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'Last 60 Days': [moment().subtract(59, 'days'), moment()],
'Last 90 Days': [moment().subtract(89, 'days'), moment()]
}
});
}).on('change', function(){
var v = $("#dp").val().toString().split("-");
that.setState({ startDate:v[0],endDate:v[1]});
});
}
render()
{
return (
<div className="form-group has-feedback">
<div className='input-group add-on col-md-2 date datepicker' data-date-format="yyyy-mm-dd">
<input id="dp" type="text" className="form-control date-picker" data-date-format="yyyy-mm-dd" value="DaterangePicker"/>
<span className="input-group-addon"><span className="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
);
}
}
window.DaterangePickerComponent = DaterangePickerComponent;
class BarChartComponent extends React.Component
{
constructor(props)
{
super(props);
this.state = {
data: null,
xlabel:null,
ylabel:null
}
};
componentDidMount()
{
var that = this;
$.ajax({
method: "GET",
url: "/querydata?query_id="+that.props.id+"&start_time="+that.props.starttime +"&end_time="+that.props.endtime,
success: function(data)
{
console.log("component did mount method called");
console.log(1,JSON.stringify(data));
var BarChartData = [
{
key: "totals",
values: []
}
];
data['data'].forEach(function (d)
{
d.value= +d.value
BarChartData[0].values.push(d)
})
console.log(2,JSON.stringify(BarChartData))
that.setState({ data:BarChartData, xlabel:data['xlabel'], ylabel:data['ylabel'] });
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
console.error("Status: " + textStatus);
console.error("Error: " + errorThrown);
}
});
}
componentDidUpdate(prevProps, prevState)
{
var that = this;
if( _.isEqual(prevState.data , that.state.data ))
{
if(prevProps.id !== that.props.id)
{
$.ajax({
method: "GET",
url: "/querydata?query_id="+that.props.id+"&start_time="+that.props.starttime +"&end_time="+that.props.endtime,
success: function(data)
{
console.log("component did update method called");
var BarChartData = [
{
key: "totals",
values: []
}
];
data['data'].forEach(function (d)
{
d.value= +d.value
BarChartData[0].values.push(d)
})
if( _.isEqual(prevState.data , that.state.data ))
{
that.setState({data:BarChartData});
}
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
console.error("Status: " + textStatus);
console.error("Error: " + errorThrown);
}
});
}
}
}
render()
{
if (this.state.data==null)
{
return (<h1>Loading...</h1>);
}
return (
<NVD3Chart type="discreteBarChart" datum={this.state.data} x="name" y="value" yAxis={{
axisLabel:this.state.ylabel}} xAxis={{ axisLabel:this.state.xlabel}} />
);
}
}
window.BarChartComponent = BarChartComponent;
class DaterangePickerComponent扩展了React.Component
{
建造师（道具）
{
超级（道具）；
此.state=
{
startDate:null，
结束日期：空
}
};
componentDidMount（）
{
var=这个；
$（文档）.ready（函数（）{
$（“#dp”）.daterangepicker(
{时间选择器：对，
时间选择器增量：30，
区域设置：{
格式：“MM/DD/YYYY h:MM A”
},
范围：{
“今天”：[时刻（），时刻（）]，
“昨天”：[moment（）.subtract（1，'天'），moment（）.subtract（1，'天'）]，
“过去7天”：[力矩（）.减去（6，'天'），力矩（）]，
“过去30天”：[力矩（）.减去（29，'天'），力矩（）]，
“本月”：[moment（）.startOf（'Month'），moment（）.endOf（'Month'），
“上个月”：[moment（）.subtract（1，'月'）.startOf（'月'），moment（）.subtract（1，'月'）.endOf（'月'）]，
“过去60天”：[力矩（）.减去（59，'天'），力矩（），
“过去90天”：[力矩（）.减去（89，'天'），力矩（）]
}
});
}).on（'change'，function（））{
var v=$（“#dp”）.val（）.toString（）.split（“-”）；
setState（{startDate:v[0]，endDate:v[1]}）；
});
}
render（）
{
返回(
);
}
}
window.DaterangePickerComponent=DaterangePickerComponent；
class DaterangePickerComponent extends React.Component
{
constructor(props)
{
super(props);
this.state =
{
startDate:null,
endDate:null
}
};
componentDidMount()
{
var that =this;
$(document).ready(function(){
$("#dp").daterangepicker(
{ timePicker: true,
timePickerIncrement: 30,
locale: {
format: 'MM/DD/YYYY h:mm A'
},
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'Last 60 Days': [moment().subtract(59, 'days'), moment()],
'Last 90 Days': [moment().subtract(89, 'days'), moment()]
}
});
}).on('change', function(){
var v = $("#dp").val().toString().split("-");
that.setState({ startDate:v[0],endDate:v[1]});
});
}
render()
{
return (
<div className="form-group has-feedback">
<div className='input-group add-on col-md-2 date datepicker' data-date-format="yyyy-mm-dd">
<input id="dp" type="text" className="form-control date-picker" data-date-format="yyyy-mm-dd" value="DaterangePicker"/>
<span className="input-group-addon"><span className="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
);
}
}
window.DaterangePickerComponent = DaterangePickerComponent;
class BarChartComponent extends React.Component
{
constructor(props)
{
super(props);
this.state = {
data: null,
xlabel:null,
ylabel:null
}
};
componentDidMount()
{
var that = this;
$.ajax({
method: "GET",
url: "/querydata?query_id="+that.props.id+"&start_time="+that.props.starttime +"&end_time="+that.props.endtime,
success: function(data)
{
console.log("component did mount method called");
console.log(1,JSON.stringify(data));
var BarChartData = [
{
key: "totals",
values: []
}
];
data['data'].forEach(function (d)
{
d.value= +d.value
BarChartData[0].values.push(d)
})
console.log(2,JSON.stringify(BarChartData))
that.setState({ data:BarChartData, xlabel:data['xlabel'], ylabel:data['ylabel'] });
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
console.error("Status: " + textStatus);
console.error("Error: " + errorThrown);
}
});
}
componentDidUpdate(prevProps, prevState)
{
var that = this;
if( _.isEqual(prevState.data , that.state.data ))
{
if(prevProps.id !== that.props.id)
{
$.ajax({
method: "GET",
url: "/querydata?query_id="+that.props.id+"&start_time="+that.props.starttime +"&end_time="+that.props.endtime,
success: function(data)
{
console.log("component did update method called");
var BarChartData = [
{
key: "totals",
values: []
}
];
data['data'].forEach(function (d)
{
d.value= +d.value
BarChartData[0].values.push(d)
})
if( _.isEqual(prevState.data , that.state.data ))
{
that.setState({data:BarChartData});
}
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
console.error("Status: " + textStatus);
console.error("Error: " + errorThrown);
}
});
}
}
}
render()
{
if (this.state.data==null)
{
return (<h1>Loading...</h1>);
}
return (
<NVD3Chart type="discreteBarChart" datum={this.state.data} x="name" y="value" yAxis={{
axisLabel:this.state.ylabel}} xAxis={{ axisLabel:this.state.xlabel}} />
);
}
}
window.BarChartComponent = BarChartComponent;
类BarChartComponent扩展了React.Component
{
建造师（道具）
{
超级（道具）；
此.state={
数据：空，
xlabel:null，
ylabel:null
}
};
componentDidMount（）
{
var=这个；
$.ajax({
方法：“获取”，
url:“/querydata？query_id=“+that.props.id+”&start_time=“+that.props.starttime+”&end_time=“+that.props.endtime，
成功：功能（数据）
{
log（“组件没有调用挂载方法”）；
log（1，JSON.stringify（数据））；
var BarChartData=[
{
关键：“总计”，
值：[]
}
];
data['data'].forEach（函数（d）
{
d、 value=+d.value
BarChartData[0]。值。推送（d）
})
log（2，JSON.stringify（BarChartData））
setState（{data:BarChartData，xlabel:data['xlabel']，ylabel:data['ylabel']}）；
},
错误：函数（XMLHttpRequest、textStatus、errorshown）
{
控制台错误（“状态：+textStatus”）；
console.error（“error:+errorshown”）；
}
});
}
componentDidUpdate（prevProps、prevState）
{
var=这个；
if（u.isEqual（prevState.data，that.state.data））
{
if（prevProps.id！==that.props.id）
{
$.ajax({
方法：“获取”，
url:“/querydata？query_id=“+that.props.id+”&start_time=“+that.props.starttime+”&end_time=“+that.props.endtime，
成功：功能（数据）
{
log（“组件确实更新了调用的方法”）；
var BarChartData=[
{
关键：“总计”，
值：[]
}
];
data['data'].forEach（函数（d）
{
d、 value=+d.value
BarChartData[0]。值。推送（d）
})
if（u.isEqual（prevState.data，that.state.data））
{
setState（{data:BarChartData}）；
}
},
错误：函数（XMLHttpRequest、textStatus、errorshown）
{
控制台错误（“状态：+textStatus”）；
console.error（“error:+errorshown”）；
}
});
}
}
}
render（）
{
if（this.state.data==null）
{
返回（加载…）；
}
返回(
);
}
}
window.BarChartComponent=BarChartComponent；
class Dashboard extends React.Component
{
constructor(props)
{
super(props);
this.state =
{
all_dashboards:null,
current_dashboard: null,
link:[]
}
this.updateDashboardState = this.updateDashboardState.bind(this);
this.updatecharts = this.updatecharts.bind(this);
};
componentDidMount()
{
var that = this;
$.ajax({
method: "GET",
url: "/dashboarddata",
dataType: "json",
success: function(data)
{
console.log(1,JSON.stringify(data));
console.log(2,data);
that.setState({all_dashboards:data['data'], current_dashboard:data['data'][0]['Charts']});
var Link_Tab =[];
var keys = Object.keys(data['data']);
keys.forEach(function(key)
{
console.log(data['data'][key]['link']);
Link_Tab.push(data['data'][key]['link']);
});
that.setState({link:Link_Tab});
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
console.error("Status: " + textStatus);
console.error("Error: " + errorThrown);
}
});
}
updateDashboardState(index)
{
if( (this.state.current_dashboard) == null && (this.state.all_dashboards) == null )
{
return (<h1>Loading..</h1>)
}
else
{
this.setState({current_dashboard:this.state.all_dashboards[index]['Charts']})
}
}
updatecharts(chart)
{
if((chart.type)=="MetricChartComponent")
{
return <MetricChartComponent id ={chart.query_id} />;
}
else if((chart.type)=="BarChartComponent" )
{
return <BarChartComponent id ={chart.query_id} />;
}
else if((chart.type)=="PieChartComponent")
{
return <PieChartComponent id ={chart.query_id} />;
}
else if((chart.type)=="LineChartComponent")
{
return <LineChartComponent id ={chart.query_id} />;
}
else if((chart.type)=="TableChartComponent")
{
return <TableChartComponent id={chart.query_id} />;
}
else
{
return (<h1> Not a valid type chart </h1>);
}
}
render()
{
var that =this;
console.log(3,this.state.current_dashboard);
console.log(4,this.state.link);
if(this.state.current_dashboard==null)
{
return (<h1>Loading..</h1>);
}
return (
<div>
<div align="row">
<ul className="nav nav-tabs">
{this.state.link.map(function(name,index)
{
return <li role="presentation" id ="myid" onClick={()=>{that.updateDashboardState(index)}} ><a href="#" >{name}</a></li>
})}
</ul>
</div>
<DaterangePickerComponent starttime ={this.state.startDate} endtime={this.state.endDate}/>
<div className ="row" >
{this.state.current_dashboard.map(function(chart)
{
return(
<div className="col-sm-6">
<div className="panel panel-default ">
<div className="panel-heading">
<h3 className="panel-title">{chart.title}</h3>
</div>
<div className="panel-body">
{ that.updatecharts(chart) }
</div>
</div>
</div>
);
})
}
</div>
</div>
);
}
}
window.Dashboard = Dashboard;
类仪表板扩展了React.Component
{
建造师（道具）
{
超级（道具）；
这个州=
{
所有仪表盘：空，
当前仪表板：空，
链接：[]
}
this.updateDashboardState=this.updateDashboardState.bind（this）；
this.updatecharts=this.updatecharts.bind（this）；
};
componentDidMount（）
{
var=这个；
$.ajax({
方法：“获取”，
url:“/dashboarddata”，
数据类型：“json”，