跨不同组件传递来自 onClick 事件的接收值答案

【问题标题】：Passing received value from onClick events across different components跨不同组件传递来自 onClick 事件的接收值
【发布时间】：2018-04-03 01:14:01
【问题描述】：

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

因此，根据单击的报告月份，我需要能够显示这些员工，但在第二个组件中。

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

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

【问题讨论】：

标签： javascript reactjs onclick

【解决方案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的render函数会被调用（因为状态改变了）
...然后它将新日期（存储在状态中）传递给第二个组件。

【讨论】：

【解决方案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} />
    ]
  }
}

【讨论】：