我无法在反应中读取 dom 元素的属性“ref”答案

【问题标题】：I can't read attribut 'ref' of dom element in react我无法在反应中读取 dom 元素的属性“ref”
【发布时间】：2018-03-21 22:58:51
【问题描述】：

表单验证后我无法读取属性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>
    )
}

}

【问题讨论】：

标签： javascript reactjs dom refs

【解决方案1】：

您将它存储在组件本身中，该值应该在

下可用

console.log(this.name)

e 是点击输入时触发的事件。在您的情况下，您使用的是箭头函数，因此回调上下文中的 this 是 Home 组件。

编辑：

您还需要绑定handleSubmit，使其有权访问this。将此添加到Home 组件中：

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

【讨论】：

感谢您的回答马里奥。我试过了，但我有这个错误：“无法读取未定义的属性'名称'”
@NedjimDN 你是对的，你的handleSubmit 方法无权访问this，因为它没有绑定到组件。我更新了我的答案。

【解决方案2】：

您可能需要登录 this.name.value 而不是这个 console.log(e.name.value);

你还需要包含这个

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

【讨论】：

感谢您的回答阿迪尔。我试过了，但我有这个错误：“无法读取未定义的属性'名称'”

【解决方案3】：

e 变量正在举行一个事件。您正在寻找 e.target 以获取触发事件的元素。

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

【讨论】：