javascript - 即使调用了 setState,Chart.js 也无法刷新
问题描述
我需要使用散点图和线在Chart.js中设置几个绘图点。
但是我不知道为什么当我更改了新值并使用 setState 来更改图表的状态时。它行不通。
以下是我目前正在使用的文件:main.js
、control.js
和cartesian.js
main.js
import React, { Component } from 'react';
import Cartesian from './Cartesian/Cartesian';
import Control from './Control/Control';
import './Main.css'
class Main extends Component {
constructor(props){
super(props);
this.state = {
data: {
upperX : 0,
upperY : 0,
lowerX : 0,
lowerY : 0
}
}
}
handleCallback = (childData) => {
this.setState({
data: {
upperX : childData.upperX,
upperY : childData.upperY,
lowerX : childData.lowerX,
lowerY : childData.lowerY,
}
}, () => {
console.log(this.state.data)
})
}
render() {
return (
<div className="main-container">
<Control parentCallback={this.handleCallback}></Control>
<Cartesian data={this.state.data}></Cartesian>
</div>
);
}
}
export default Main;
控制.js
import React, { Component } from 'react';
import { InputGroup, FormControl, Row, Col, Button } from 'react-bootstrap'
import './Control.css'
class Control extends Component {
run = (event) => {
const upperArm = document.querySelector(".upperarm > input").value;
const lowerArm = document.querySelector(".lowerarm > input").value;
const upperAngle = document.querySelector(".upperangle > input").value;
const lowerAngle = document.querySelector(".lowerangle > input").value;
const upperX = Math.cos(upperAngle) * upperArm;
const upperY = Math.sin(upperAngle) * upperArm;
const lowerX = Math.cos(lowerAngle) * lowerArm;
const lowerY = Math.sin(lowerAngle) * lowerArm;
document.querySelector(".upperx > input").value = upperX + lowerX;
document.querySelector(".uppery > input").value = upperY + lowerY;
document.querySelector(".lowerx > input").value = lowerX;
document.querySelector(".lowery > input").value = lowerY;
const data = {
upperX : upperX + lowerX,
upperY : upperY + lowerY,
lowerX : lowerX,
lowerY : lowerY,
}
this.props.parentCallback(data);
// event.preventDefault();
}
render() {
return (
<div id="control">
<Row className="mt-5">
<Col>
<InputGroup size="sm" className="mb-3 upperarm">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper Arm</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 lowerarm">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower Arm</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
<Row className="mt-2">
<Col>
<InputGroup size="sm" className="mb-3 upperangle">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper Angle</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 lowerangle">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower Angle</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
<Row>
<Button className="ml-3 mb-2" variant="primary" onClick={this.run}>Run</Button>
</Row>
<Row>
<Col>
<InputGroup size="sm" className="mb-3 upperx">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper X</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 uppery">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Upper Y</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
<Row>
<Col>
<InputGroup size="sm" className="mb-3 lowerx">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower X</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
<Col>
<InputGroup size="sm" className="mb-3 lowery">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Lower Y</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</Col>
</Row>
</div>
);
}
}
export default Control;
笛卡尔.js
import React, { Component } from 'react';
import './Cartesian.css'
import { Scatter } from 'react-chartjs-2';
class Cartesian extends Component {
state = {
mydata : {
datasets: [{
label: 'Manipulator Robot',
data: [{
x: 0,
y: 0
}, {
x: this.props.data.lowerX,
y: this.props.data.lowerY
}, {
x: this.props.data.upperX,
y: this.props.data.upperY
}
],
borderColor: 'black',
borderWidth: 10,
pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'],
pointBorderColor: ['#000', '#00bcd6', '#d300d6'],
pointRadius: 5,
pointHoverRadius: 5,
fill: false,
tension: 0,
showLine: true
}]
},
option : {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks : {
autoSkip: true,
suggestedMax: 10,
suggestedMin: -10,
},
}],
yAxes: [{
ticks : {
suggestedMax: 10,
suggestedMin: -10
},
}]
},
rotation: 90
}
}
render() {
return (
<div id="cartesian">
<Scatter data={this.state.mydata} options={this.state.option} height={300} width={700} redraw/>
</div>
);
}
}
export default Cartesian;
解决方案
推荐阅读
- ios - 为什么 webview_flutter 在添加到应用程序(iOS)的情况下不起作用?
- java - 如何将字符串从小部件发送到活动?
- python - 有没有人使用过语音驱动的动画,你能让它工作吗?
- typescript - 通过序数索引打字稿获取枚举值
- java - 创建一个显示文本文件内容的类以控制台进行一些更改
- javascript - 创建一个 covid-19 应用程序并遇到动态 API 的问题
- python-3.x - 使用 NN 进行回归的 Numpy 实现
- python - 用于捕获曲目的 Spotify URI 或 Web 链接的正则表达式字符串
- sql - 如何有效地识别特定列的不同记录
- ios - 如何为谷歌地图中心按钮分配明暗模式?