event.target.valueは、テキストではなく画像をラップするボタンでは定義されていません

Question

2つのボタンがありますが、1つは画像があり、もう1つはテキストです。私は両方にonClickイベントハンドラを追加しました。

画像ボタンのevent.target.valueは、値がありテキストボタンが正しい値を持っているにもかかわらず、未定義です。

は、例えば、このフィドルを参照してください：https://jsfiddle.net/69z2wepo/84885/

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.changeSlide = this.changeSlide.bind(this); 
    } 

    changeSlide(e) { 
    e.preventDefault(); 
    console.log('e.target.value', e.target.value); 
    } 

    render() { 
    return (
     <div> 
     <button 
     onClick={this.changeSlide} 
     value="back"> 
     <img src="//www.gravatar.com/avatar/7150a453468d14f599772cd8330fcf25/?default=&s=80" alt="Previous slide" /> 
     </button> 

     <button 
      onClick={this.changeSlide} 
      value="back"> 
      CLICK ME 
     </button> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <MyComponent />, 
    document.getElementById('container') 
); 

なぜこのような場合は、ボタン内の画像を使用する正しい方法は何ですか？

Answer 1

あなたはcurrentTargetにtargetを変更する必要があります：DOMイベントのドキュメントから

changeSlide(e) { 
    e.preventDefault() 
    console.log(e.currentTarget.value) 
} 

：

イベントがDOMを横断するときEvent.currentTargetは、イベントの現在のターゲットを識別します。常に イベントハンドラがアタッチされている要素を参照します。これは、event.targetではなく、 は、イベントが発生した要素を識別します。