javascript - 我无法在反应中读取 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组件。

编辑：

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

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

Answer 2

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

你还需要包括这个

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

Answer 3

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

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