2014-12-23 60 views
4

我試圖使用React events來訪問分配給按鈕的自定義「值」,但根據點擊按鈕的位置,我得到了不同的結果。我大概可以使用getDOMNode()this.state來獲得所需的結果,但我對如何使用「React Events」及其行爲有些困惑。React Events行爲

最好是在單個元素上使用合成事件,如<input>?有沒有辦法通過反應事件獲得按鈕的價值?

注:我在<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

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

我m新的綜合事件和DOM行爲,你們可以告訴。任何指導將不勝感激!謝謝。

回答

6

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

使用currentTarget會得到,因爲該事件的按鈕會冒泡的按鈕。您正在獲取span元素,因爲您可能點擊了跨度。這就是target的價值。

而且,這裏是更新小提琴:http://jsfiddle.net/v27bqL5y/1/

1

另一種方式做,這是使用refs。如果你想遠離使用像e.currentTarget這樣的東西,這可能是一個更簡單的方法。

看小提琴:http://jsfiddle.net/v27bqL5y/2/