Реагировать, как получить реквизит от event.currentTarget

Question

Есть ли у реагирования чистый способ получить this.props.values ​​из элемента списка?

Я в основном хочу получить реквизиты текущих предметов, чтобы я мог заполнить модальное диалоговое окно с данными. согласно ниже функции пользовательского реквизита, которые я определяю как «ид» доступны, но я действительно хотел бы сделать что-то вроде этого, и есть весь реквизит

event.currentTarget.this.props.note 

Handler

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> 
); 
} 

Или, если вы не хотите использовать отдельный компонент, вы можете получить доступ к this.props переменной из обработчика события кликер:

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