我尝试使用React events
来访问自定义'值'分配给一个按钮,但根据我点击按钮的位置,我会得到不同的结果。我可以使用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>
)
}
});
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行为不熟悉,就像你们所知道的那样。任何指导将不胜感激!感谢。
答案 0 :(得分:6)
我想你想要e.currentTarget.getAttribute('value')
使用currentTarget
将获取按钮,因为事件将冒泡到按钮。您正在获取span元素,因为您可能单击了span。这就是target
的价值所在。
此处还有更新的小提琴:http://jsfiddle.net/v27bqL5y/1/
答案 1 :(得分:1)
另一种方法是使用refs。如果你想远离使用像e.currentTarget
这样的东西,这可能是一种更简单的方法。