Question

在我的App.js文件中，我添加了两个名为<Clock />的组件，在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组件中。通过为您的时钟提供道具来更新它，从而触发App中的回调：

在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

识别来自多个组件的组件

1 个答案: