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

Question

这是我的代码。我是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;

Answer 1

在按钮上添加onClick并将其类型更改为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

如果你想使用该按钮，你应该建立另一个状态来保持提交的数据和一个状态来保持输入字段的变化

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;

如果你想提交，只需从按钮中删除onClick，因为它有一个默认类型的提交，并在表单组件中放置一个onSubmit，你也可以防止表单默认行为。

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

和

<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>

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

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;

还要注意构造函数。

Answer 3

贝娄的形式，你应该把这样的东西

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