从 ref 获取值 - 不断指示 无法读取未定义的属性'value'

Question

这就是我尝试进入参考区域的方式。但是当我尝试将内容写入输入时，当我必须以console.log显示它时，它只是表明我的mailRef是

无法读取未定义的属性"值">

import React from 'react';
class Signup extends React.Component {
mailRef = React.createRef();
handleSubmit = (event) => {
event.preventDefault();
console.log('heyyyyyyyyyyyyyyy');
console.log('Submit: ' + this.mailRef.value.value);
}
..

.html：

<input type="text" name="email" ref={this.mailRef} className="form-control" placeholder="Email" />

如果我只需要在console.log上写">嘿"，我会把它拿出来，但一旦我得到我写的内容，它就不会抓住它。

Answer 1

你应该像这样将声明放在构造函数中：

import React from 'react';
class Signup extends React.Component {
constructor(props){
super(props);
this.mailRef = React.createRef();  //fixed
}
handleSubmit = (event) => {
event.preventDefault();
console.log('heyyyyyyyyyyyyyyy');
console.log('Submit: ' + this.mailRef.current.value); //fixed
}

有关详细信息，请参阅非受控组件