我無法讀取反應中dom元素的attribut'ref'

表單驗證後，我無法讀取屬性ref。結果是undefined，我不明白爲什麼。我無法讀取反應中dom元素的attribut'ref'

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> 
    ) 
}

}

來源

2017-10-10 Nedjim DN

你將其存儲在組件本身，該值應該可以在

console.log(this.name)

e是，當你點擊輸入是被觸發事件。在你的情況下，你使用的是箭頭函數，所以this在回調的上下文中是Home組件。

編輯：

您還需要綁定handleSubmit使之具有訪問權this。這增加了Home組件：

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

來源

2017-10-10 13:48:34

感謝您的回答馬里奧。我嘗試了，但我有這個錯誤：「無法讀取未定義的」 –

@NedjimDN屬性'名稱'你是正確的，你的'handleSubmit'方法不能訪問'this'，因爲它沒有綁定到組件。我更新了我的答案。 –

謝謝馬里奧！它現在工作:) –

您可能需要登錄this.name.value，而不是這個 console.log(e.name.value);

您還需要包括這種

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

來源

2017-10-10 13:52:47 Adil

感謝您的回答Adil。我嘗試了，但我有這個錯誤：「不能讀取屬性'名稱'未定義的」 –

的e變量舉行活動。您正在尋找e.target以獲取事件發生的元素。

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

來源

2017-10-10 14:07:18 skylize

我無法讀取反應中dom元素的attribut'ref'

回答

相關問題