从多个组件中识别组件

在我的App.js文件中，我添加了两个名为<Clock />的组件，时钟内我可以选择一个国家和它的时差。 Clock组件有一个名为value的状态，在我的App.js中，我希望在选中时返回这两个偏移量的总和，但我不确定如何最好地执行此操作？从多个组件中识别组件

我已经从App.js传递了一个状态到Clock组件，但我仍然不确定如何识别哪个时钟已更新，因此何时重新运行求和函数。

任何帮助或指向我朝着正确的方向将是巨大的

对不起这里的代码...

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;

分

我为乱码的歉意，在一个应用程序和审判错误第一次尝试做的有点过分的地方

来源

2017-04-10 John Peet

'Clock'的代码是什么？或者你正在使用什么包（库）来重复使用'时钟' –

你能告诉我们代码，它会更好。 –

如果你需要总和 - 你为什么要识别时钟？ – elmeister

你可以抬起状态：

商店都Clock S在你的状态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>

在这里详细介绍：通过给道具的时钟触发你App回调更新https://facebook.github.io/react/docs/lifting-state-up.html

来源

2017-04-10 16:18:08

从多个组件中识别组件

回答

相关问题