React Events行为

Question

我正在尝试使用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>
        )
    }
});

的jsfiddle

console.log(e.target)结果:

1. 将鼠标移到glyphicon'复选标记'上,然后单击.

   <span class="glyphicon glyphicon-ok" data-reactid=".0.0.0"></span>
   

2. 将鼠标移到"提交"一词上,然后单击

   <span data-reactid=".0.0.1"> Submit</span> 
   

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

   <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/