Question

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

pollEnrich

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

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;

在React JS中单击提交后如何显示用户信息

4 个答案: