使用react参参和形式

Question

表单接受名字和姓氏的输入。任务是使用参考文献和回调参考文献显示全名。单击submit后，我将得到一个错误。在这里附加密码。帮我找出什么是错误。

import React from 'react';
import './style.css';

export default class App extends React.Component {
  constructor() {
    super();
    this.setName = (ele) => {
      this.name = ele;
    };
    this.setLast = (ele) => {
      this.last = ele;
    };
    this.setDisp = (ele) => {
      this.disp = ele;
    };
  }
  // handleInputChange = (e, name) => {
  //   this.setState({
  //    [name]: e.target.value
  //  })
  // }

  handleSubmit = (e) => {
    e.preventDefault();
    var f = this.name.value;
    var l = this.last.value;
    var fullname = f + ' ' + l;
    this.disp.innerHTML = fullname;
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input type="text" ref={this.setName} placeholder="First name" />
          <br />
          <br />
          <input type="text" ref={this.setLame} placeholder="Last name" />
          <br />
          <br />
          <input type="submit" value="Full name" />
        </form>
        <h3 ref={this.disp}></h3>
      </div>
    );
  }
}

Answer 1

您需要创建三个变量并使用createRef创建对dom元素的引用：

import React, { createRef } from "react";

export default class App extends React.Component {
  name = null;
  last = null;
  disp = null;

  constructor() {
    super();
    this.setName = (ele) => {
      this.name = ele;
    };
    this.setLast = (ele) => {
      this.last = ele;
    };
    this.setDisp = (ele) => {
      this.disp = ele;
    };
    this.name = createRef();
    this.last = createRef();
    this.disp = createRef();
  }
  // handleInputChange = (e, name) => {
  //   this.setState({
  //    [name]: e.target.value
  //  })
  // }

  handleSubmit = (e) => {
    e.preventDefault();
    var f = this.name.current.value;
    var l = this.last.current.value;
    var fullname = f + " " + l;
    this.disp.current.innerHTML = fullname;
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input type="text" ref={this.name} placeholder="First name" />
          <br />
          <br />
          <input type="text" ref={this.last} placeholder="Last name" />
          <br />
          <br />
          <input type="submit" value="Full name" />
        </form>
        <h3 ref={this.disp}></h3>
      </div>
    );
  }
}