如果单击组件，如何更改平移状态？

Question

我有三个提供可用时隙列表的组件。

如果我单击component1列表上的一个时隙，它就会被选中，现在，如果一个平移的组件（我们称它为component2）也有一个与在component1上单击的时隙匹配的时隙，我想要一个在component2中显示为灰色。

我该怎么做？

呈现可用时隙列表的组件称为CompanyPanel：

export default class CompanyPanel extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      selectedTime: 'None',
      times: this.props.times,
    }

    this.chooseTime = this.chooseTime.bind(this)
    this.deleteTime = this.deleteTime.bind(this)

  }

  componentDidMount () {
    this.chooseTime(this.state.selectedTime)
  }

  deleteTime (time) {
    this.setState( ({times}) => ({
      times: [...this.state.times].filter( t => t !== time),
    }))    
  }

  chooseTime (selectedTime) {
    this.setState({
      selectedTime,
    })
  }

  render() {
    const { selectedTime, times } = this.state

    return (
      <React.Fragment>
        <div className="flex-auto pa3">
          <div className="ba mv2">
            <p className="tc pa2 dib bg-near-white">{this.props.name}</p>
          </div>
          <div className="ba mv2">
            <p className="tc pa2 dib bg-red white">{selectedTime}</p>
          </div>
          <div className="ba mv2">
            {times.map((time, i) => (
              <div key={i} className="bg-green">
                <span className="pa2 red pointer ma2 bg-white" onClick={() => this.deleteTime(time)}>X</span>
                <p onClick={() => this.chooseTime(time.dateUTCString)} className="tc pa2 dib bg-yellow">{time.dateUTCString}</p>
              </div>
            ))}
          </div>
        </div>
      </React.Fragment>
    )
  }
}

那些CompanyPanel组件被称为CompaniesDashboard的父组件包装：

export default class CompaniesDashboard extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      error: null,
      data,
    }

    this.isLoading = this.isLoading.bind(this)
  }

  isLoading() {
    return this.state.posts === null && this.state.error === null
  }

  render() {
    const { data, error } = this.state

    return (
      <React.Fragment>
        {this.isLoading() && <p>LOADING</p>}
        {error && <p>{error}</p>}

        <div className="flex">
          {data && data.map((company, i) => (
            <CompanyPanel key={i} times={company.times} name={company.name} />
          ))}
        </div>
      </React.Fragment>
    )
  }
}

当CompanyPanel组件在内部单击chooseTime方法时，我想我需要以某种方式在父级中设置状态。但不确定如何做到。