Respond to Event Behavior

Question

I am trying to use React eventsto access a custom "value" assigned to a button, but I get different results depending on where I click the button. I can probably use getDOMNode()or this.stateto get the desired result, but I'm a little confused about how to use React Events and its behavior.

Is it better to use synthetic events for a single element such as <input>? Is there a way to get the value of a button using responsive events?

Note. I use bootstrap glyphicon inside the element <button>.

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

results

console.log (e.target):

• Hover over the glyphicon and click.

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

• ""

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