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

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

下可用

Long.toString()

console.log(this.name)是单击输入时触发的事件。在您的情况下，您使用的是箭头函数，因此回调上下文中的e是this组件。

编辑：

您还需要绑定Home，以便它可以访问权限handleSubmit。将其添加到this组件：

Home

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

我无法阅读反应中的dom元素的'ref'

3 个答案: