在我的 App.js 文件中,我添加了两个名为 <Clock />
的组件。 ,在时钟内我可以选择一个国家及其时差。 Clock 组件有一个名为 value 的状态,在我的 App.js 中,我想在选择时返回这两个偏移量的总和,但我不确定如何最好地做到这一点?
我已将状态从 App.js 传递给 Clock 组件,但仍不确定如何识别哪个 Clock 已更新,以及何时重新运行 sum 函数。
任何帮助或为我指明正确的方向都会很棒
抱歉,这是代码...
App.js
import React, { Component } from 'react';
import Clock from './components/Clock';
class App extends Component {
render() {
return (
<div className="pa4">
<Clock />
<Clock />
<h4>HERE WOULD BE THE TIME DIFFERENCE BETWEEN THE TWO CLOCKS</h4>
</div>
);
}
}
export default App;
组件/Clock.js
import React, { Component } from 'react';
import Face from './clock/Face';
// Country select start
class Clock extends Component {
constructor() {
super();
this.state = {
value: 0,
data: {zones: []}
}
this.handleChange = this.handleChange.bind(this);
}
componentDidMount() {
fetch("http://api.timezonedb.com/v2/list-time-zone?key=6KFSXAA33B1V&format=json")
.then(response => response.json())
.then(json => this.setState({data: json}));
}
handleChange(event) {
this.setState(
{
value: event.target.value
}
);
}
render() {
const zones = this.state.data.zones;
const countries = zones.map((country) =>
<option key={zones.indexOf(country)} value={country.gmtOffset}>
{country.countryName}
</option>
)
const gmtOffset = this.state.value / 60 / 60;
return (
<div className="w-third ">
<select onChange={this.handleChange}>
{countries}
</select>
<Face timeDiff={gmtOffset} />
<h3 className="td">{gmtOffset}</h3>
</div>
);
}
}
export default Clock;
我对困惑的代码表示歉意,第一次尝试应用程序和尝试错误在某些地方有点过分
最佳答案
你可以提升状态:
将两个Clock
的状态存储在App
组件中。通过为时钟提供一个 Prop 来更新它,该 Prop 会在您的 App
中触发回调:
在您的应用程序类中:
handleClock1Changed(time) {
this.setState({
clock1Time: time,
});
}
handleClock2Changed(time) {
this.setState({
clock2Time: time,
});
}
[...]
<Clock onChange={value => this.handleClock1Changed(value)} />
<Clock onChange={value => this.handleClock2Changed(value)} />
在你的时钟中:
<select
onChange={() => {
this.handleChange();
this.props.onChange(this.state.value);
}} >
{countries}
</select>
详细信息请参见:https://facebook.github.io/react/docs/lifting-state-up.html
关于javascript - 从多个组件中识别组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43321591/