Question

假设我们有两个不同的React组件。一个包含带日期的报告，另一个应显示在特定月份工作的员工。

因此，根据点击的月份报告，我需要能够向第二个组件展示这些员工。

我能够获得第一个点击的日期，但是为了知道要显示哪些员工需要将这些数据（来自第一个组件）与员工数据（第二个组件）进行比较。

这里最大的问题是 - 我如何将新构建的（onClick - 自定义功能）转移到第二个组件的事件数据，以便我可以比较它们？

Answer 1

您可以创建一个“父”组件，它将呈现您的两个组件。

父组件将在州内具有所选日期。

class Parent extends Component {
  constructor() {
    this.handleDateChange = this.handleDateChange.bind(this);
    this.state = { date: null };
  }

  handleDataChange(date) {
    this.setState({ date });
  }

  render() {
    return (
      <div>
        <Component1 onDateChange={this.handeDataChange} />
        <Component2 date={this.state.date} />
      </div>
    );
  }
}

您必须更新Component1以接收onDateChange，并且必须在更新日期时调用该功能：

// where the date is updated
this.props.onDateChange(newDate);

此外，您还必须更新Component2以接收date（所选日期），以便过滤员工：

// maybe in the render function... you will know the selected date with this.props.date. For example you could do something like this:
const filtered = this.employees.filter(employee => employee.date === this.props.date);

这是如何运作的？

当您在第一个组件中选择日期时，它会调用handleDateChange
...它将更新Parent的状态
...然后将调用Parent的渲染函数（因为状态已更改）
...然后它会将新日期（存储在状态中）传递给第二个组件。

Answer 2

包含公共父组件中的组件，然后该组件可以充当相关数据的代理。

通常，有几个组件需要反映相同的变化数据。我们建议将共享状态提升到最近的共同祖先。 [来自：lifting state up]

这是简化的，但是：

class Employees extends Component {
  state = {
    employees: []
  }

  async componentDidMount() {
    const { clickedDate } = this.props
    const employees = await fetchEmployees(clickedDate) // or whatever
    this.setState({ employees })
  }

  render() {
    const { employees } = this.state

    if (employees.length === 0) {
      return
        <p>Loading...</p>
    }

    return (
      <div className='employees'>
        {
          employees.map(employee => (
            <p>{employee}</p>
          ))
        }
      </div>
    )
  }
}

const Reports = ({ dates, setClickedDate }) => (
  <div className='reports'>
    {
      dates.map(date => (
        <p onClick={() => setClickedDate(date)}>{date}</p>
      ))
    }
  </div>
)

class Parent extends Component {
  state = {
    clickedDate: undefined,
    dates: ['dates', 'from', 'somewhere']
  }

  setClickedDate = clickedDate => this.setState({ clickedDate })

  render() {
    const { clickedDate } = this.state

    return [
      <Reports dates={dates} setClickedDate={this.setClickedDate} />,
      <Employees clickedDate={clickedDate} />
    ]
  }
}

从不同组件的onClick事件传递接收的值

2 个答案: