javascript - react 事件行为

Question

我正在尝试使用 React events访问分配给按钮的自定义“值”，但根据单击按钮的位置，我会得到不同的结果。我大概可以用 getDOMNode()或 this.state以获得所需的结果，但我对如何使用“React Events”及其行为感到困惑。

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

注意:我在 <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. 将鼠标移到字形“复选标记”上，然后单击。

   <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 的值。

这里还有更新的 fiddle :http://jsfiddle.net/v27bqL5y/1/