Javascript 反应-单击按钮后显示组件
我正在使用Javascript 反应-单击按钮后显示组件,javascript,reactjs,material-ui,Javascript,Reactjs,Material Ui,我正在使用materialui和react charts js构建一个从后端获取并显示数据的页面 我在理解如何正确显示MyGraph时遇到了一些问题 该页面包含两个日期选择器、一个切换和一个提升按钮。 我希望在选择数据并单击按钮后,在第二个选项卡中显示图形,然后重置数据并再次重复 这些是一些尝试,但使用此策略,MyGraph会正确显示,但当调用this.props.onCreated()时,this.state.buttonClicked为false,并且图形会隐藏 MyCard.js impo
materialui
和react charts js
构建一个从后端获取并显示数据的页面
我在理解如何正确显示MyGraph
时遇到了一些问题
该页面包含两个日期选择器
、一个切换
和一个提升按钮
。
我希望在选择数据并单击按钮后,在第二个选项卡中显示图形,然后重置数据并再次重复
这些是一些尝试,但使用此策略,MyGraph
会正确显示,但当调用this.props.onCreated()
时,this.state.buttonClicked
为false,并且图形会隐藏
MyCard.js
import React from 'react';
import {Card, Tabs, Tab, FontIcon, DatePicker, Toggle, GridList, GridTile, SelectField, MenuItem, RaisedButton} from 'material-ui/';
import MyGraph from './MyGraph';
const styles = {
root: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
margin: '0 auto'
},
gridList: {
width: 200,
height: 500,
overflowY: 'auto',
},
};
export default class MyCard extends React.Component {
constructor(props){
super(props)
this.state = {
queryNumber: 1,
startDate: null,
endDate: null,
sameRegion: true,
buttonDisabled: true,
buttonClicked: false
}
}
handleQueryNumberChange = (event, index, value) => {
this.setState({queryNumber: value});
}
check(){
if (this.state.startDate && this.state.endDate) {
this.setState({buttonDisabled: false})
}
}
handleStartDateChange = (event, date) => {
this.setState({
startDate: date,
}, this.check);
};
handleEndDateChange = (event, date) => {
this.setState({
endDate: date,
}, this.check);
};
handleSameRegionChange = (event, isInputChecked) =>{
this.setState({sameRegion: isInputChecked});
}
handleClick = (event) =>{
this.setState({buttonClicked: true})
}
resetForm = () =>{
this.setState({buttonClicked: false, startDate: null, endDate: null, buttonDisabled: true})
}
render() {
return (
<Card>
<Tabs>
<Tab icon={<FontIcon className="material-icons" >date_range</FontIcon>} label="Pick">
<div style={styles.root}>
<GridList
cols={1}
cellHeight={100}
padding={1}
style={styles.gridList}
>
<GridTile>
<SelectField
floatingLabelText="Query"
value={this.state.queryNumber}
onChange={this.handleQueryNumberChange}
>
<MenuItem value={1} primaryText="Date" />
<MenuItem value={2} primaryText="Query2" />
<MenuItem value={3} primaryText="Query3" />
<MenuItem value={4} primaryText="Query4" />
<MenuItem value={5} primaryText="Query5" />
</SelectField>
</GridTile>
<GridTile>
<DatePicker hintText="Select start date" value={this.state.startDate} onChange={this.handleStartDateChange}/>
</GridTile>
<GridTile>
<DatePicker hintText="Select end date" value={this.state.endDate} onChange={this.handleEndDateChange}/>
</GridTile>
<GridTile>
<Toggle label="Same Region" defaultToggled={true} onToggle={this.handleSameRegionChange}/>
</GridTile>
<GridTile>
<RaisedButton label="Send" secondary={true} disabled={this.state.buttonDisabled} onClick={this.handleClick}/>
</GridTile>
</GridList>
</div>
</Tab>
<Tab icon={<FontIcon className="material-icons" >pie_chart</FontIcon>} label="Graph">
<div>
{this.state.buttonClicked && <MyGraph values={this.state} onCreated={this.resetForm}/>}
</div>
</Tab>
</Tabs>
</Card>
);
}
}
import React from 'react';
import {Card, Tabs, Tab, FontIcon, DatePicker, Toggle, GridList, GridTile, SelectField, MenuItem, RaisedButton} from 'material-ui/';
import MyGraph from './MyGraph';
import moment from "moment/moment";
const styles = {
root: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
margin: '0 auto'
},
gridList: {
width: 200,
height: 500,
overflowY: 'auto',
},
};
export default class MyCard extends React.Component {
constructor(props){
super(props)
this.state = {
queryNumber: 1,
startDate: null,
endDate: null,
sameRegion: true,
buttonDisabled: true,
buttonClicked: false,
graphData: {
data: props,
labels: [],
datasets: [{
data: [],
backgroundColor: [
'#d50000',
'#2962ff',
'#00c853',
'#ffab00'
],
hoverBackgroundColor: [
'#ff5252',
'#448aff',
'#69f0ae',
'#ffd740'
]
}]
}
}
}
handleQueryNumberChange = (event, index, value) => {
this.setState({queryNumber: value});
}
check(){
if (this.state.startDate && this.state.endDate) {
this.setState({buttonDisabled: false})
}
}
handleStartDateChange = (event, date) => {
this.setState({
startDate: date,
}, this.check);
};
handleEndDateChange = (event, date) => {
this.setState({
endDate: date,
}, this.check);
};
handleSameRegionChange = (event, isInputChecked) =>{
this.setState({sameRegion: isInputChecked});
}
handleClick = (event) =>{
this.callApi()
.then(res => {
console.log(res)
let graphDataModified = this.state.graphData;
let datasetsModified = graphDataModified.datasets;
let labelsModified = graphDataModified.labels;
datasetsModified[0].data.length = 0;
labelsModified.length = 0;
for(let resource of res){
datasetsModified[0].data.push(resource.avg)
labelsModified.push(resource._id)
}
this.setState({graphData: graphDataModified, buttonClicked: true})
})
.then(() =>{
this.resetForm()
})
.catch(err => console.log(err))
}
async callApi(){
var query = 'http://localhost:3100/api/pings/query/avgInDay?start='+moment(this.state.startDate).format('YYYY-MM-DD')+'&end='+moment(this.state.endDate).format('YYYY-MM-DD')+'&sameRegion='+((this.state.sameRegion === true) ? 0 : 1)
const response = await fetch(query);
const body = await response.json();
return body;
}
resetForm = () =>{
this.setState({startDate: null, endDate: null, buttonDisabled: true})
}
render() {
return (
<Card>
<Tabs>
<Tab icon={<FontIcon className="material-icons" >date_range</FontIcon>} label="Pick">
<div style={styles.root}>
<GridList
cols={1}
cellHeight={100}
padding={1}
style={styles.gridList}
>
<GridTile>
<SelectField
floatingLabelText="Query"
value={this.state.queryNumber}
onChange={this.handleQueryNumberChange}
>
<MenuItem value={1} primaryText="Date" />
<MenuItem value={2} primaryText="Query2" />
<MenuItem value={3} primaryText="Query3" />
<MenuItem value={4} primaryText="Query4" />
<MenuItem value={5} primaryText="Query5" />
</SelectField>
</GridTile>
<GridTile>
<DatePicker hintText="Select start date" value={this.state.startDate} onChange={this.handleStartDateChange}/>
</GridTile>
<GridTile>
<DatePicker hintText="Select end date" value={this.state.endDate} onChange={this.handleEndDateChange}/>
</GridTile>
<GridTile>
<Toggle label="Same Region" defaultToggled={true} onToggle={this.handleSameRegionChange}/>
</GridTile>
<GridTile>
<RaisedButton label="Send" secondary={true} disabled={this.state.buttonDisabled} onClick={this.handleClick}/>
</GridTile>
</GridList>
</div>
</Tab>
<Tab icon={<FontIcon className="material-icons" >pie_chart</FontIcon>} label="Graph">
<div>
{ this.state.buttonClicked ? <MyGraph data={this.state.graphData}/> : null }
</div>
</Tab>
</Tabs>
</Card>
);
}
}
从“React”导入React;
从“材质ui/”导入{Card、Tabs、Tab、FontIcon、日期选择器、切换、GridList、GridTile、SelectField、MenuItem、RaisedButton};
从“/MyGraph”导入MyGraph;
常量样式={
根目录:{
显示:“flex”,
flexWrap:“wrap”,
为内容辩护:“周围的空间”,
边距:“0自动”
},
网格列表:{
宽度:200,
身高:500,
溢出:“自动”,
},
};
导出默认类MyCard.Component{
建造师(道具){
超级(道具)
此.state={
查询编号:1,
startDate:null,
endDate:null,
萨梅雷吉翁:没错,
按钮禁用:正确,
按钮勾选:假
}
}
handleQueryNumberChange=(事件、索引、值)=>{
this.setState({queryNumber:value});
}
检查(){
if(this.state.startDate&&this.state.endDate){
this.setState({buttonDisabled:false})
}
}
handleStartDateChange=(事件、日期)=>{
这是我的国家({
开始日期:,
},这个。检查);
};
handleEndDateChange=(事件,日期)=>{
这是我的国家({
结束日期:日期,
},这个。检查);
};
HandleSamereRegionChange=(事件,isInputChecked)=>{
this.setState({sameRegion:isInputChecked});
}
handleClick=(事件)=>{
this.setState({buttonClicked:true})
}
resetForm=()=>{
this.setState({buttonClicked:false,startDate:null,endDate:null,buttonDisabled:true})
}
render(){
返回(
{this.state.buttonClicked&&}
);
}
}
MyGraph.js
import React from 'react';
import {Pie} from 'react-chartjs-2';
import moment from 'moment'
export default class MyGraph extends React.Component {
constructor(props) {
super(props);
this.state = {
data: props,
labels: [],
datasets: [{
data: [],
backgroundColor: [
'#d50000',
'#2962ff',
'#00c853',
'#ffab00'
],
hoverBackgroundColor: [
'#ff5252',
'#448aff',
'#69f0ae',
'#ffd740'
]
}]
}
}
call(){
this.callApi()
.then(res => {
console.log(res)
let datasetsModified = this.state.datasets;
let labelsModified = this.state.labels;
datasetsModified[0].data.length = 0;
labelsModified.length = 0;
for(let resource of res){
datasetsModified[0].data.push(resource.avg)
labelsModified.push(resource._id)
}
this.setState({
labels: labelsModified,
datasets: datasetsModified,
})
})
.then(() =>{
this.props.onCreated()
})
.catch(err => console.log(err))
}
async callApi(){
var query = 'http://localhost:3100/api/pings/query/avgInDay?start='+moment(this.state.data.values.startDate).format('YYYY-MM-DD')+'&end='+moment(this.state.data.values.endDate).format('YYYY-MM-DD')+'&sameRegion='+((this.state.data.values.sameRegion === true) ? 0 : 1)
const response = await fetch(query);
const body = await response.json();
return body;
}
componentDidMount(){
this.call()
}
componentWillReceiveProps(nextProps) { // Successives rendering
console.log('will')
this.setState({data: nextProps}, this.call())
}
render() {
return (
<Pie data={this.state} width={500} height={500} options={{maintainAspectRatio: false}}/>
);
}
}
import React from 'react';
import {Pie} from 'react-chartjs-2';
export default class MyGraph extends React.Component {
render() {
console.log(this.props.data)
return (
<Pie data={this.props.data} width={500} height={500} options={{maintainAspectRatio: false}}/>
);
}
}
从“React”导入React;
从'react-chartjs-2'导入{Pie};
从“时刻”导入时刻
导出默认类MyGraph扩展React.Component{
建造师(道具){
超级(道具);
此.state={
资料:道具,
标签:[],
数据集:[{
数据:[],
背景颜色:[
#d50000",,
"2962ff",,
“#00c853”,
“#ffab00”
],
悬停背景颜色:[
"ff5252",,
"448aff",,
"69f0ae",,
“#ffd740”
]
}]
}
}
调用(){
这是callApi()
。然后(res=>{
console.log(res)
让datasetsModified=this.state.datasets;
让labelsModified=this.state.labels;
datasetsModified[0]。data.length=0;
labelsModified.length=0;
for(出租资源){
datasetsModified[0]。data.push(resource.avg)
labelsModified.push(资源。\u id)
}
这是我的国家({
标签:标签已修改,
数据集:数据集已修改,
})
})
.然后(()=>{
this.props.onCreated()
})
.catch(err=>console.log(err))
}
异步调用API(){
var查询http://localhost:3100/api/pings/query/avgInDay?start=“+矩(this.state.data.values.startDate).format('YYYY-MM-DD')+”&end='+矩(this.state.data.values.endDate).format('yyyyy-MM-DD')+'”&sameRegion='+((this.state.data.values.sameRegion==true)?0:1)
const response=等待获取(查询);
const body=wait response.json();
返回体;
}
componentDidMount(){
这个.call()
}
componentWillReceiveProps(下一步){//Successives渲染
console.log('will')
this.setState({data:nextrops},this.call())
}
render(){
返回(
);
}
}
有人能举例说明正确的方法吗
提前感谢:)
编辑1:我试图提升状态,它正在做我想要的事情,但在单击之前,每次修改都会调用MyGraph;这样可以吗?