は、コンポーネントを反応させるのフォーム部品をonSubmitハンドラは、私は以下のいる

Question

を動作しない反応します。私はonSubmitハンドラに関数を追加してこれを示しました。

関数は、正しい時刻に呼び出されています。ただし、その関数内のthisの値はnullです。私はthisの値が反応成分であると予想していたので、これは私には驚くべきことです。 thisがヌルであるという事実は、official React documentationによって提案されたものと非常に似たロジック/コードを使用しているので、私にとって驚くべきことです。

thisがReactコンポーネントではないこと、予想通りにコードを修正する方法を理解していただきありがとうと思います。あなたはReactES2015 classesで使用する場合

Answer 1

あなたは意味

class Form extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    }  

    handleSubmit(e) { 
    e.preventDefault(); 

    let loginInput = this.refs.login; 
    this.props.addCard(loginInput.value); 
    loginInput.value = ''; 
    } 

    render() { 
    return(
     <form onSubmit={ this.handleSubmit }> 
     <input placeholder="githug login" ref="login" /> 
     <button>Add Login</button> 
     </form> 
    ); 
    } 
} 

Example

No Autobinding

方法は、通常のES6クラスと同じ意味をたどるイベントハンドラにthisを設定する必要があり その彼らこれをインスタンスに自動的にバインドしないでください。 に.bind（this）または矢印関数=>を明示的に使用する必要があります。