我无法读取反应中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'

回答

相关问题