Javascript 如何在同一元素的onClick处理程序中显示HTML元素的属性

我还在学习，我遇到了这个障碍。 我正在尝试创建一个井字游戏。现在我希望游戏板上的每个单元都有一个不同的道具，叫做“数字”，它将是元素的ID，还有一个onclick处理程序将显示ID。现在，由于我还在开发这个想法，只有一个元素得到了数字道具。目前我只得到未定义的代码，代码如下所示：

var React = require('react');

var Plansza3x3 = React.createClass({
  toggleClick: function() {
    alert(this.props.number);
  },

  render: function() {

  return (
    <div className="parent">
    <div className="row">
      <div className="cell" number="3" onClick={this.toggleClick}></div>
      <div className="cell"></div>
      <div className="cell"></div>
    </div>
    <div className="row">
      <div className="cell"></div>
      <div className="cell"></div>
      <div className="cell"></div>
    </div>
    <div className="row">
      <div className="cell"></div>
      <div className="cell"></div>
      <div className="cell"></div>
    </div>
  </div>//parent
)//return
}//render
})//createClass

module.exports = Plansza3x3;

var React=require（'React'）；
var Plansza3x3=React.createClass({
切换单击：函数（）{
警报（此.props.number）；
},
render:function（）{
返回(
//母公司
)//返回
}//渲染
})//createClass
module.exports=Plansza3x3；

另外，我不确定确切的时间，但有时onclick会在渲染时自动触发。有人能解释为什么吗

编辑：我已经尝试将我的代码转换成ES6，正如你们中的一些人建议我做的那样。此外，在这样做的同时，我想到了另一个概念，即在Plansza3x3状态下创建9个对象。每个对象都有自己的fieldNumber（这是我想要显示的ID）。然后在div.parent内部渲染时，我要创建3个div.rows，每个div.rows将包含3个div.cell。如您所见，我尝试将包含div.cells信息的对象分为三个部分，并使用slice将其分为一个包含3个元素的数组，每个元素包含三个div.cells的数据。然后我想把它们全部映射过来，得到三行，每行有三个单元格。在渲染时，我得到一个错误，表示有一个意外的标记，它指向for循环。守则：

var style = require('./Plansza3x3.css');

var React = require('react');

class Plansza3x3 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            boardGameFields: [
                {fieldNumber: 1},
                {fieldNumber: 2},
                {fieldNumber: 3},
                {fieldNumber: 4},
                {fieldNumber: 5},
                {fieldNumber: 6},
                {fieldNumber: 7},
                {fieldNumber: 8},
                {fieldNumber: 9}
            ]
        }
    }
    render () {
        return (
            <div className="parent">
                {
                    for(var i = 0; i = 2; i++) {
                        <div className="row">
                            {var currentRowFieldsArray = this.state.boardGameFields.slice(3*i, (3*i)+1, (3*i)+2);
                                currentRowFieldsArray.map(currentField =>
                                    <div className="cell" key={currentField.fieldNumber} fieldNumber={currentField.fieldNumber} onClick={e => alert(e.target.fieldNumber)}></div>
                                )//map
                            }
                        </div>//row
                    }//for
                }
            </div>//parent
        )//return
    }//render
}//class

export default Plansza3x3;

var style=require（'./Plansza3x3.css'）；
var React=要求（'React'）；
类Plansza3x3扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
棋盘游戏场：[
{fieldNumber:1}，
{fieldNumber:2}，
{fieldNumber:3}，
{fieldNumber:4}，
{fieldNumber:5}，
{fieldNumber:6}，
{fieldNumber:7}，
{fieldNumber:8}，
{fieldNumber:9}
]
}
}
渲染（）{
返回(
{
对于（变量i=0；i=2；i++）{
{var currentRowFieldsArray=this.state.boardGameFields.slice（3*i，（3*i）+1，（3*i）+2）；
currentRowFieldsArray.map（currentField=>
警报（如target.fieldNumber）}>
)//地图
}
//划船
}//为了
}
//母公司
)//返回
}//渲染
}//阶级
导出默认计划sza3x3；

如果未向onClick方法传递任何事件，则默认情况下将调用该方法。 为了防止这种情况，您可以这样称呼它：

onClick={e=>this.toggleClick（e）}

---

现在，有一个建议：使用ES6，它比旧的JS更适合反应

使用

数据编号

而不是

编号

。考虑到

数据编号

已被harcoded，您可以从类似

e.target.getAttribute（'data-number'）的事件中检索它

var Plansza3x3=React.createClass({
切换单击：功能（e）{
console.log（e.target.getAttribute（'data-number'）；
},
render:function（）{
返回(
1.
2.
3.
4.
5.
6.
)
}
})
ReactDOM.render（，document.getElementById（'app'））

应打印出

编号

属性。您能否向我们展示父元素的渲染函数，以便我们可以看到您如何传递属性？对于在渲染时被调用的函数，如果您执行以下操作，通常会发生这种情况：

onClick={this.function（）}

，因为这会在渲染时立即调用它。如果要调用函数（特别是带有参数的函数），可以在我仅有的父渲染方法中使用：

onClick={（）=>this.function（someValue）}

。我传递的数字属性只是我以前显示的，因为我认为这是正确的方法。关于渲染时的自动触发-我明白你的意思，但是在我的示例中我没有写括号，所以我相信这样我就不会马上调用函数。但是，如果它的内部onClick，那么默认情况下，它不应该在用户单击某个内容后被触发吗？好吧，那么您没有将该值作为属性向下传递。你需要像

这样的东西，我理解你的意思，但是我的Plansza3x3元素内部有所有的div（游戏板单元），所以我想我必须定义div本身的数字道具，它们在Plansza3x3内部，你所说的只会将一个“数字”道具传递给所有div？哦，我明白你的意思了。在这种情况下，您应该创建一个“行”React组件，该组件将数字作为属性。这就是React的优点，因此您不必复制粘贴内容。因此，有一个row组件只返回一个包含3个单元格div的row div，然后在Plansza3x3组件中，只要您想用硬编码的值尝试第一个命题，并且它仍然没有定义，您就可以对任意多的行使用

。你知道为什么会这样吗？更新了答案：）。使用数据编号great！那正是我要找的！非常感谢。我已经试过你的方法了。我现在在div.cell上的onclick看起来是这样的：this.toggleClick（e）}style={cellColor}>和toggleClick函数：toggleClick:function（e）{alert（e.target.number）；}但是在单击之后，我仍然得到属性“number”是未定义的