Question

我已经映射了一个对象数组，每个对象都有doubleclick事件，该事件将允许编辑对象值。我只想访问被单击的对象，而不是所有对象。我试图添加一个自定义属性和一个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>

     ...

我的失败结果是：

第一个映射的对象：当您双击我时，我会变成输入内容，并且可以编辑我

第二个地图对象：如果您单击过我，则无法编辑

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

以此类推...

当我双击所有对象时，我希望事件仅在单击所选对象时才做出反应

Answer 1

您可以使用以下代码：

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>

获取自定义属性值

1 个答案: