Question

我尝试使用React events来访问自定义＆＃39;值＆＃39;分配给一个按钮，但根据我点击按钮的位置，我会得到不同的结果。我可以使用getDOMNode()或this.state来获得所需的结果，但我对如何使用“反应事件”感到困惑。它的行为。

最好在<input>这样的单个元素上使用合成事件吗？有没有办法使用反应事件获取按钮的值？

注意：我在<button>元素中使用bootstrap glyphicon。

var Content = React.createClass({
    handleClick: function(e) {
        console.log( e.target );
    },
    render: function() {
        return (
            <div>
                <button type="button" value="button1" className="btn btn-default" onClick={this.handleClick}><span className="glyphicon glyphicon-ok"></span> Submit</button>
            </div>
        )
    }
});

Jsfiddle

console.log（e.target）结果：

将鼠标移到glyphicon＆＃39;复选标记＆＃39;上，然后单击。
```
<span class="glyphicon glyphicon-ok" data-reactid=".0.0.0"></span>
```
将鼠标移到单词上＆＃39;提交＆＃39;然后单击
```
<span data-reactid=".0.0.1"> Submit</span> 
```

将鼠标移动到按钮内的任何其他位置，然后单击

<button type="button" value="button1" class="btn btn-default" data-reactid=".0.0"><span class="glyphicon glyphicon-ok" data-reactid=".0.0.0"></span><span data-reactid=".0.0.1"> Submit</span></button>

我们对合成事件和DOM行为不熟悉，就像你们所知道的那样。任何指导将不胜感激！感谢。

Answer 1

我想你想要e.currentTarget.getAttribute('value')

使用currentTarget将获取按钮，因为事件将冒泡到按钮。您正在获取span元素，因为您可能单击了span。这就是target的价值所在。

此处还有更新的小提琴：http://jsfiddle.net/v27bqL5y/1/

Answer 2

另一种方法是使用refs。如果你想远离使用像e.currentTarget这样的东西，这可能是一种更简单的方法。

请参阅小提琴：http://jsfiddle.net/v27bqL5y/2/

React Events行为

2 个答案: