反応のDOM要素の属性refを読み取ることができません

Question

フォームの検証後に属性refを読み取ることができません。結果はundefinedなので、なぜ私は理解できません。

import React from 'react'; 
import {Link} from 'react-router-dom'; 

export default class Home extends React.Component {. 

handleSubmit(e){ 
    e.preventDefault(); 

    console.log(e.name.value); 
} 

render() { 
    return (
     <div> 
      <form onSubmit={this.handleSubmit}> 
       <input type='text' ref={ (input) => this.name = input} /> 
       <input type='text' ref={ (input) => this.topic = input} /> 
       <input type='submit'/> 
      </form> 
     </div> 
    ) 
} 

}

Answer 1

あなたがコンポーネント自体に格納され、値が

console.log(this.name) 

eの下で利用可能であるべきであるあなたが入力をクリックしたときにトリガされますイベントです。あなたの場合、矢印関数を使用しているので、thisはコールバックのコンテキストでHomeコンポーネントです。

EDIT：

あなたはまた、それが正しいthisへのアクセス権を持つようにhandleSubmitをバインドする必要があります。

constructor() { 
    super() 
    this.handleSubmit = this.handleSubmit.bind(this) 
} 

Answer 2

あなたが代わりにあなたはまた、この

constructor(props){ 
    super(props) 
    this.handleSubmit = this.handleSubmit.bind(this) 
} 

Answer 3

e変数がイベントを保持しているを含める必要があり、この console.log(e.name.value);

のthis.name.valueをログに記録する必要があるかもしれません：Homeコンポーネントにこれを追加します。イベントが発生した要素を取得するには、e.targetを探しています。

console.log(e.target.name.value);