javascript - 不能在 react 中使用 ref

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> 
     ):
   }
}