如何通过 onClick 事件将道具传递给组件？

Question

我在这里遍历列表并显示可点击的{expense.createdAt}。当我点击{expense.createdAt} 时，我想在同一页面上显示它的<ExpenseDetails />，所以我需要传递道具。如何使用 onClick 做到这一点？

我下面的代码不显示任何内容。

class ExpenseList extends Component {

  render () {
    const {expenses} = this.props;
    const list = expenses.expenseList.map(expense =>
        <Segment clearing key={expense.uid} >
          <a href="" onClick={() => {this.passProps(expense)}}>
            {expense.createdAt}
          </a>
        </Segment>
    )

    const details = function passProps(expense){
      return (
        <div>
          <ExpenseDetails expense={expense}/>
        </div>
      )
    }

    return (
        <div>
          <Grid celled='internally'>
            <Grid.Row>
              <Grid.Column width={5}>
                <div>
                  <h1>Your Expense List:</h1>
                  <Segment.Group raised>

                    {list}

                  </Segment.Group>
                </div>

              </Grid.Column>
              <Grid.Column width={11}>
                <Segment>

                  {details}

                </Segment>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </div>

    )
  }
}

当我点击{expense.createdAt} 时，页面会刷新。这可能是个问题。我怎样才能防止这种情况发生？

console.log(this.props.expenses):

Answer 1

这样的事情应该可以工作。重要的概念是您需要有一个父组件来传递数据的两个子组件。在这种情况下，Expenses 是父级。在父级中，您创建一个函数showItemDetails，并将其传递给ExpenseList。那是您的 clickhandler，它用于传递您要呈现的数据的索引位置。然后showItemDetails 使用this.setState 给ItemDetails 提供你想要的道具。

import React, {Component} from 'react'

export default class Expenses extends Component {
  constructor(props) {
    super(props)
    this.state = {
      expenseItems: []
    }
  }

  showItemDetails(idx) {
    const {expenseItems} = this.props.expenses.expenseList[idx]
    this.setState({expenseItems})
  }

  render() {
    const createdDates = this.props.expenses.expenseList.map(({createdAt}) => {
      return createdAt
    })
    const expenseListProps = {
      showItemDetails: (idx) => this.showItemDetails(idx),
      createdDates
    }
    const itemDetailsProps = {expenseItems: this.state.expenseItems}
    return (
      <div>
        <ExpenseList {...expenseListProps}/>
        <ItemDetails {...itemDetailsProps}/>
      </div>
    )
  }
}

class ExpenseList extends Component{
  render() {
    const expenseList = this.props.createdDates.map((date, idx) => (
      <div key={idx}>
        <button onClick={() => this.props.showItemDetails(idx)}>
          {date}
        </button>
      </div>
    ))
    return (
      <div>
        {expenseList}
      </div>
    )
  }
}

class ItemDetails extends Component {
  render() {
    debugger;
    const items = this.props.expenseItems.map(({uid, date, desc, amount}) => (
      <div>
        {uid}
        {date}
        {desc}
        {amount}
      </div>
    ))
    return (
      <div>
        {items}
      </div>
    )
  }
}