Question

我在多个map ed div元素上具有事件处理程序。触发事件时，它将在所有map个元素上触发。我希望该事件仅在单击/选定的元素上触发

    class App extends Component {
   constructor (props) {
super(props)


this.state = {
  edit: false,
  div: true,
}
 }

 componentDidMount(){

 this.props.getPortData()
 }
 handleDoubleClick = (event, index, cargo) => {

const name = event.currentTarget.getAttribute('data-tag');
console.log(name, 'data tag value')
console.log(index, 'index')
console.log(event.target, 'event.target')
console.log(event.currentTarget, 'event.currentTarget')
const myIndex = cargo.id;
console.log(myIndex, 'my index')
// const test = cargo.index
console.log(cargo, 'mapedCargo')
if( myIndex === (index+356) ) {

 this.setState({
edit: true,
div: false,
 }  )
} 



 }
  render() {
 let dataReceived;
 const styleDiv = this.state.edit ? {display: 'none'} :{};  
 const styleInput = this.state.div ? {display: 'none'} :{display: 'block'};  
 // console.log(this.props, "item");
 if(this.props.Item.loading) {
   dataReceived = (<div  className="loading-relative"><div><h1 className="loading">Loading</h1></div><div className="lds-css ng-scope"><div className="lds-double-ring"><div></div><div></div></div></div></div>);
}else {
 const shiped = this.props.Item.data.ships;
 const cargo = this.props.Item.data.dock.cargoItems;
// console.log(shiped, "ship")
// console.log(cargo.index, "dock")

    const mapedShips = shiped.map(vasia => (
      <div key={vasia+vasia.id}>
          <div className="ships">
            <div className="value">
            <div  className="name" key={vasia.name}>Name: {vasia.name}</div>
            <div className="name" key={vasia.id}>Id: {vasia.id}</div>            
        </div>
          <div className="value">
        <div className="name" key={vasia.maxWeight}>Max Weight: {vasia.maxWeight}</div>
        <div className="name" key={vasia.maxVolume}>Max Volume: {vasia.maxVolume}</div>

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

        <div className="name" key={cargo.weight}>Cargo weight: {cargo.weight}</div>
        <div className="name" key={cargo.volume}>Cargo volume: {cargo.volume}</div>

        </div>
    </div>
      </div>
    ))



dataReceived = 
<div className="all">
<div className="testing">
  {/* <div className="ships"> */}
  {mapedShips}
  </div>
   <div className="testing"> 
  {mapedCargo}
  </div> 
</div>
 };

  return (
   <div className="App">
    {dataReceived}
   </div>
 );
}


 }

我知道我的代码一团糟，因为我尝试了多种解决方案以使其正常工作

Answer 1

在这种情况下，您的handleDoubleClick函数应如下所示

this.state = {
  cargo: [{
    div: true,
    edit: false
  },{
    div: true,
    edit: false
  }] // As many objects as the cargos you have
};

您处于状态的货物密钥应为对象数组，而不是单个对象

<div>
    {this.state.cargo.map((cargo, index) => (
      <div key={cargo+cargo.id}>
        <div className="cargo">
          <div className="value">
            {this.state.cargo[index].div && <div className="name" onDoubleClick={(event) => {this.handleDoubleClick(event, index)}}>
              Cargo Id: {cargo.id}
            </div>} 
            {this.state.cargo[index].edit && <div style={styleInput}>Cargo Id:
              <input id="test" type="text" defaultValue={cargo.id} />
            </div>}               
          </div>
        </div>
      </div>
    ))}
  </div>

最后用适当的&&逻辑包装您的输入文本和文本div，以根据状态下的货键中相应的索引值显示和隐藏

import requests
from pandas.io.json import json_normalize

url = 'https://www.international-pc.com/get/ajax/2305/TDS'


headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36'}

params = {
'draw':'1',
'columns[0][data]':'PRODUCT DATASHEET',
'columns[0][name]':'',
'columns[0][searchable]':'true',
'columns[0][orderable]':'true',
'columns[0][search][value]':'',
'columns[0][search][regex]':'false',
'columns[1][data]':'LANGUAGE',
'columns[1][name]':'',
'columns[1][searchable]':'true',
'columns[1][orderable]':'true',
'columns[1][search][value]':'',
'columns[1][search][regex]':'false',
'columns[2][data]':'DOWNLOAD',
'columns[2][name]':'',
'columns[2][searchable]':'true',
'columns[2][orderable]':'true',
'columns[2][search][value]':'',
'columns[2][search][regex]':'false',
'order[0][column]':'0',
'order[0][dir]':'asc',
'start':'0',
'length':'10',
'search[value]':'',
'search[regex]':'false'}


data = requests.post(url, headers=headers, data=params).json()
df = json_normalize(data['data'])

Answer 2

这是一个简单的解决方案

状态

 state = {
        showIt: false,
        newKey: 0
      };

功能

handleDoubleClick = index => {
    this.setState({
      showIt: true,
      newKey: index
    });
  };

JSX

  <div>
        {this.state.cargo.map((cargo, index) => (
          <div key={cargo + cargo.id}>
            <div className="cargo">
              <div className="value">
                <div
                  className="name"
                  key={cargo.id}
                  ref={cargo.id}
                  data-tag={cargo.id}
                  style={styleDiv}
                  onDoubleClick={event => {
                    this.handleDoubleClick(event, index, cargo);
                  }}
                >
                  Cargo Id: {cargo.id}
                </div>
                {this.state.showIt && this.state.newKey === index ? (
                  <div style={styleInput} id={index}>
                    Cargo Id:
                    <input id="test" type="text" defaultValue={cargo.id} />
                  </div>
                ) : (
                  ""
                )}

                <div className="name" key={cargo.weight}>
                  Cargo weight: {cargo.weight}
                </div>
                <div className="name" key={cargo.volume}>
                  Cargo volume: {cargo.volume}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

如何防止一个事件处理程序触发所有事件

2 个答案: