Question

import React, { Component } from "react";
class Learning extends Component {fName = React.createRef();onForm = e => {
e.preventDefault();console.log(this.fName.value.value);};render() {return (<div><form onSubmit={this.onForm}><inputtype="text" placeholder="Enter Your First Name" ref={this.fName} /><button type="submit" style={BtnStyle}>Submit</button></form></div>);}}export default Learning;

Answer 1

您必须在ref上使用current属性：

console.log(this.fName.current.value);

https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs

但是请考虑使用更改事件和状态

class Learning extends Component {
   constructor() {
     this.state = {
       fName: ''
     }
   }
   updateName = (e) => {
      this.setState({fName: e.target.value});
   }
   onForm = (e) => {
     e.preventDefault();
     console.log(this.state.fName):
   }
   render() {
     return (
       <form onSubmit={this.onForm}>
         <input onChange={this.updateName} />
       </form> 
     ):
   }
}

Answer 2

再次检查react docs，使用React.createRef()来访问使用this.fName.current.XXX创建的引用。

不能在反应中使用ref

2 个答案: