时间戳

首页 > 解决方案 > 获取自定义属性值

reactjs - 获取自定义属性值

问题描述

我已经映射了一个对象数组，每个对象都有双击事件，这将允许编辑对象值。我只想访问被点击的对象而不是所有对象。我试图添加一个自定义属性和一个 if 语句，这将允许我只访问选定的对象，但它没有工作。我应该如何解决这个问题？

       handleDoubleClick = ( event) => {  
      let value = event.target.value;
      let attr = event.target.getAtribute('data-tag');

      if( value === attr ) {   
          this.setState({
           state: setting some states...,

         })
       }

       render()...
       const mapedCargo = cargo.map(cargo => (
      <div key={cargo+cargo.id}>

        <div className="name" key={cargo.id} data-tag={cargo.id} style={styleDiv} onDoubleClick={this.handleDoubleClick}>Cargo Id: {cargo.id}</div> 
          <div style={styleInput}>Cargo Id:
            <input id="test" type="text" defaultValue={cargo.id} />
          </div>               

      </div>
    ))

    return <div className="App">{mapedCargo}</div>

     ...

我的disered结果将是：

第一个映射对象：当你双击我时，我变成输入，你可以编辑我

第二个映射对象：如果你没有点击我，你就不能编辑我

第三个映射对象：同样的逻辑也适用于所有对象

等等...

在我双击所有对象对事件做出反应的那一刻，但我希望它仅在单击选定的对象时做出反应

标签： reactjs

解决方案

您可以使用此代码：

handleDoubleClick = ( event, index) => {
  console.log('nuumber ' + index + ' clicked')  
  //other codes
}

const mapedCargo = cargo.map((cargo, index) => (
  <div key={cargo+cargo.id}>
    <div className="name" key={cargo.id} data-tag={cargo.id} style={styleDiv} onDoubleClick={() => {this.handleDoubleClick(event, index)} }>Cargo Id: {cargo.id}</div> 
    <div style={styleInput}>Cargo Id:
      <input id="test" type="text" defaultValue={cargo.id} />
    </div>               
 </div>

推荐阅读