javascript - 从多个组件中识别组件

Question

在我的 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;

我对困惑的代码表示歉意，第一次尝试应用程序和尝试错误在某些地方有点过分

Answer 1

你可以提升状态:

将两个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