在react js中单击提交后如何显示用户信息

Question

This is my code. Am new for Reactjs, am trying to create form and display user info. I want to display the user details below the form after clicked the submit form

import React, {Component} from 'react';

class Input extends Component {
    state = {
        firstName: ''
    }

    displayNameHandler = (e) => {
        let updatedName = e.target.value;
        this.setState({firstName: updatedName});
        //console.log(updatedName);  
    }

    render() {
        return( 
            <div>
                <form>
                    <label>Enter the Name</label>
                    <input type="text" name="firstName" onChange={this.displayNameHandler}/>
                    <button type="button" onSubmit={e => this.displayNameHandler(e)}>Submit</button>
                    <p>"FirstName: " {this.state.firstName}</p>
              </form>
            </div>
        );
    }
}
export default Input;

Answer 1

Add onClick on button and change type its to submit . Use conditional rendering to show name on submit:

import React, { Component } from 'react';

class Input extends Component {
  state = {
    firstName: '',
    showName: false

  }

  displayNameHandler = (e) => {
    let updatedName = e.target.value;
    this.setState({ firstName: updatedName });
    //console.log(updatedName);  
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({
      showName: true
    });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>Enter the Name</label>
          <input type="text" name="firstName" onChange={this.displayNameHandler} value={this.state.firstName} />
          <button type="submit" onClick={this.handleSubmit}>Submit</button>
          {this.state.showName && <p>"FirstName: " {this.state.firstName}</p>}
        </form>
      </div>
    );
  }
}
export default Input;

Answer 2

if you want to use the button you should make another state to keep the submitted data and a state to keep changes in input field

import React, { Component } from "react";

class Input extends Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      submitedFirstName: ""
    };
  }

  inputChange = e => {
    const firstName = e.target.value;
    this.setState(() => ({ firstName }));
  };
  displayNameHandler = () => {
    this.setState(prevState => ({ submitedFirstName: prevState.firstName }));
  };

  render() {
    return (
      <div>
        <form>
          <label>Enter the Name</label>
          <input type="text" name="firstName" onChange={this.inputChange} />
          <button type="button" onClick={this.displayNameHandler}>
            Submit
          </button>
          <p>
            "FirstName: "
            {this.state.submitedFirstName && this.state.submitedFirstName}
          </p>
        </form>
      </div>
    );
  }
}
export default Input;

if you want to have on submit simply remove onClick from button cause it has a default type of submit and put an onSubmit in form component and also you sould prevent forms default behavior.

displayNameHandler = e => {
  e.preventDefault();
  this.setState(prevState => ({ submitedFirstName: prevState.firstName }));
};

and

<form onSubmit={this.displayNameHandler}>
  <label>Enter the Name</label>
  <input type="text" name="firstName" onChange={this.inputChange} />
  <button>Submit</button>
  <p>
    "FirstName: " {this.state.submitedFirstName && this.state.submitedFirstName}
  </p>
</form>

but you can also show data in input change

import React, { Component } from "react";

class Input extends Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: ""
    };
  }

  inputChange = e => {
    const firstName = e.target.value;
    this.setState(() => ({ firstName }));
  };

  render() {
    return (
      <div>
        <form>
          <label>Enter the Name</label>
          <input type="text" name="firstName" onChange={this.inputChange} />
          <p>
            "FirstName: "
            {this.state.FirstName && this.state.FirstName}
          </p>
        </form>
      </div>
    );
  }
}
export default Input;

also pay attention to the constructor.

Answer 3

波纹管形式你应该把这样的东西

{this.state.firstName !=="" && <p>{this.state.firstName}</p>}

Answer 4

import React, { Component } from 'react';

class Input extends Component {
  state = {
    firstName: '',
    

  }

  displayNameHandler = (e) => {
    let updatedName = e.target.value;
    this.setState({ firstName: updatedName });
    //console.log(updatedName);  
  }

  handleSubmit = () => {
    alert("The Name you Entered is" , this.state.firstName);
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>Enter the Name</label>
          <input type="text" name="firstName" onChange={this.displayNameHandler} value={this.state.firstName} />
          <button type="submit" onClick={this.handleSubmit}>Submit</button>
          
        </form>
      </div>
    );
  }
}
export default Input;