javascript - 通过单击 react.js 传递 id

标签 javascript reactjs

下面是我的部分代码,但我的问题很简单,当用户点击 li 时,如何让我的函数显示 data-id="1"?

render(){
    return(
      <ul id="todo">
      {this.state.items.map((item,i) => 
        <li className='list-group-item' key={i} data-id={item.id}>{item.name}
        <button onClick={//how to pass item.id to my function?}>X</button>
        </li>
      )}
      </ul>
    ) 
  }

最佳答案

因为您已经在使用 ES6 - 使用 arrow 可能会更干净一些函数在这里:

render(){
    return(
      <ul id="todo">
      {this.state.items.map((item,i) => 
        <li className='list-group-item' key={i} data-id={item.id}>{item.name}
        <button onClick={() => this.yourfunc(item.id)}>X</button>
        </li>
      )}
      </ul>
    ) 
}

关于javascript - 通过单击 react.js 传递 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39818569/

相关文章:

javascript - 将旧值作为 "ghost"thumb 添加到 &lt;input type ="range"> Slider

javascript - 错误: 'Objects are not valid as a React child' in a very simple redux app

css - 如何将类动态添加到手动类名中?

javascript - 0.59.9版本的React Native项目创建时报错: couldn't find template. config.js

javascript - 如何替换 jQuery Mobile 中已弃用的函数 - updateHash

适用于 Windows 的 Javascript 控制台,例如 JSC

cookies - 使用 React Native WebSockets 发送 Cookie

javascript - React 似乎在浏览器中渲染之前转义了 HTML,导致它在页面中显示为代码

javascript - 如何在node js中从json结果中获取键值

javascript - 移动网络浏览器和移动网络应用程序是否共享相同的 localStorage