Javascript 我能'；t读取属性'；参考'；react中dom元素的定义

表单验证后，我无法读取属性

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

从“React”导入React；
从'react router dom'导入{Link}；
导出默认类Home扩展React.Component{。
handleSubmit（e）{
e、 预防默认值（）；
console.log（例如name.value）；
}
render（）{
返回(
this.name=input}/>
this.topic=input}/>
)
} 

---

}

如果将其存储在组件本身中，则该值应在下可用

console.log(this.name)

e

是单击输入时触发的事件。在您的例子中，您使用的是一个arrow函数，因此回调上下文中的

这个

就是

Home

组件

编辑：

您还需要绑定

handleSubmit

，以便它能够访问正确的

this

。将其添加到

Home

组件：

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

---

您可能需要记录

此.name.value

而不是此

console.log（例如name.value）

你还需要包括这个

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

e
变量正在保存一个事件。您正在查找
e.target
，以获取触发事件的元素

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

谢谢你的回答，阿迪尔。我试过了，但我有一个错误：“无法读取未定义的属性‘名称’”谢谢你的回答Mario。我尝试过，但我有一个错误：“无法读取未定义的”@NedjimDN的属性'name'，您是对的，您的
handleSubmit
方法无法访问
此
，因为它未绑定到组件。我更新了我的答案。