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

编辑:

您还需要绑定(bind) handleSubmit 以便它可以访问正确的 this。将此添加到 Home 组件:

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