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

这是我的密码。我是Reactjs的新手，我正在尝试创建表单并显示用户信息。单击提交表单后，我想在表单下方显示用户详细信息

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;

添加onClick 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;

添加onClick 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;

---

在下面的表格中，你应该放这样的东西

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

---

在下面的表格中，你应该放这样的东西

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

---

如果要使用该按钮，则应在输入字段中设置另一个状态以保留提交的数据，并设置另一个状态以保留更改

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;

及

但您也可以在输入更改中显示数据

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;

---

还要注意构造器。

如果要使用该按钮，则应设置另一个状态以保留提交的数据，并设置一个状态以保留输入字段中的更改

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;

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;

及

但您也可以在输入更改中显示数据

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;

---

还要注意构造器。

谢谢murli。表单正在提交，但我想在表单下方显示用户信息。选择选项如何？如果你选择你的国籍，比如法国，它会显示你好，或者如果你是德国人，在谢谢你的形式下打招呼。表单正在提交，但我想在表单下方显示用户信息。选择选项如何？我该怎么选择你的国籍，比如法语，它显示了Bunjor，或者如果你是德国人，HALO在表格下面，你应该考虑对你所做的事情做一个简短的描述，你应该考虑对你所做的事情做一个简短的描述。

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;