Question

在一个循环中，我创建一个rect-element并将其推入一个数组：

squares = [];
render: function() {
  for (var i = 0 ; i < 10; i++) {
     squares.push (<Rectangle height={this.props.afm} width={this.props.afm} x={xpos} y={ypos} value="3" id="vlakje" name={i} style={{fill: 'rgb('100,100,100')'}} onClick={this.mouseDownEvent} />);
  }
}

var Rectangle = React.createClass({
        render: function() {
            return <rect width="10"></rect>;
        }
    });

然后，当我记录例如Array的第一个元素的值时，它返回一个Object。稍后，我需要访问这些元素来更改元素样式。

当我收到鼠标时，点击这样：

mouseDownEvent: function(ev) {
  var eTarget= ev.target;
}

...我记录了eTarget，它给出了一个html标签：

<rect width="10" />

...我可以像这样访问和编辑：

eTarget.style.fill = #ff0000;

如何从阵列中获取此目标，以便我可以更改html样式？

Answer 1

如果您将this.mouseDownEvent更改为this.mouseDownEvent.bind(this)，＆＃34; this＆＃34; mouseDownEvent内部将引用单击的Rectangle。然后你可以做任何事情＆＃34;这个＆＃34;你喜欢的。

ReactJS：如何访问存储在数组中的rect-element的html？

1 个答案: