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

这样的事情应该有效。重要的概念是，您需要为两个子组件传递数据的父级。在这种情况下，try { db.SaveChanges(); } catch (DBConcurrencyException ex) { //How do I know which record(s) throw the exception }是父级。在父级中，您可以创建一个向下传递给Expenses的函数showItemDetails。这是您的clickhandler，用于传递备份要渲染的数据的索引位置。 ExpenseList然后使用showItemDetails为this.setState提供您想要的道具。

ItemDetails

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

1 个答案: