我正在使用Loading.io库创建一个加载栏,并在用户输入数字时对其进行更新。我正在使用React来实现这一点。我将用户输入设置为我的应用程序状态,并将它们作为道具跨组件传递。
每当传递新的属性时,我都有一个组件LoadingBar_Update来更新LoadingBar组件。
Parent.js
class ParentComp extends Component {
constructor(props) {
super(props);
this.state = { reading: "45" };
}
onInputChange(event) {
this.setState({ reading: event.target.value });
}
render() {
return (
<React.Fragment>
<input type="text" onChange={event => this.onInputChange(event)} />
<h2>{this.state.reading}</h2>
<LoadingBar reading={this.state.reading}/>
</React.Fragment>
);
}
}
LoadingBar.js
const LoadingBar = props => {
return <div className="ldBar" data-value={props.reading} data-preset="fan"
/>;
};
问题是加载组件没有重新渲染,加载栏总是停留在初始状态值上。当我通过React开发工具检查时,我可以更新数据属性,但它不会重新呈现。请指出我哪里做错了。
谢谢
发布于 2018-06-18 00:40:36
对于加载栏,您需要使用refs更新数据,因为根据文档。声明事情不会工作加载栏不会在数据更新时更新,它有设置方法,所以你需要使用方法来更新组件和调用设置方法,你需要dom对象,你可以通过refs( dom对象的反应方式)获得它。希望这能有所帮助。
import React, { Component } from "react";
class App extends Component {
componentDidMount() {}
onInputChange = e => {
this.loadbarRef.ldBar.set(e.target.value);
};
render() {
return (
<React.Fragment>
<input type="text" onChange={this.onInputChange} />
<div
className="ldBar"
data-value={20}
data-preset="fan"
ref={t => (this.loadbarRef = t)}
/>
</React.Fragment>
);
}
}
export default App;
https://stackoverflow.com/questions/50898321
复制相似问题