Question

反应是否有一种干净的方法从列表项中获取this.props.values？

我基本上想要获取当前项目道具，以便我可以使用数据填充模态对话框。根据以下功能，我指定的自定义道具如'id'是可访问的，但我真的想做这样的事情并拥有所有的道具

event.currentTarget.this.props.note

处理程序

  clicker(event){
    console.log('clicking the clicker');
    console.log(event.currentTarget.id);

    this.setState({isEdit: true});
    console.log(this.state.isEdit);
  }

查看

<div id={this.props.id} onClick={this.clicker} className="aui-item page-card off-track notecards">
       <div className="project-details">
          <div className="card-container">
              <div className="left">
                  <h6>Title</h6>
                  <span>{this.props.note.content}</span>

                  <h6 className="compact">Last status report</h6>
                  <span>{this.props.note.updatedAt}</span>
              </div>

              <div className="right">
                <span>something</span>
              </div>
          </div>

      </div>
    </div>

Answer 1

您可以直接访问点击器内的道具

clicker(event){
    console.log('clicking the clicker');
    console.log(this.props.id);

    this.setState({isEdit: true});
    console.log(this.state.isEdit);
  }

Answer 2

在这种情况下，最好创建单独的组件。在我看来，没有必要创造巨大的意见。

所以，你的组件应该是这样的：

function Item({
  id,
  updatedAt,
  content,
  onClick,
}) {
  // We should pass `id` variable to `onClick` handler.
  return (
    <div onClick={() => onClick(id)} className="aui-item page-card off-track notecards">
      <div className="project-details">
        <div className="card-container">
          <div className="left">
          <h6>Title</h6>
          <span>{content}</span>
          <h6 className="compact">Last status report</h6>
          <span>{updatedAt}</span>
        </div>
        <div className="right">
          <span>something</span>
          </div>
        </div>
      </div>
    </div>
  );
}

或者，如果您不想使用单独的组件，则可以从clicker事件处理程序访问this.props变量：

clicker(event){
   // this.props are accesible here.
   this.setState({isEdit: true});
}

反应如何从event.currentTarget获取项目道具

2 个答案: