在REACT中更新加载栏的HTML数据属性
在REACT中更新加载栏的HTML数据属性
提问于 2018-06-18 00:05:59
我正在使用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开发工具检查时，我可以更新数据属性，但它不会重新呈现。请指出我哪里做错了。
谢谢
回答 1
Stack Overflow用户
发布于 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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50898321
复制相关文章
相似问题