Question

我在react中制作了一个表格，该表格从用户那里获取输入并将其存储在状态中。现在，我想在用户单击React中的Submit按钮下方的输入字段中的Submit按钮时显示状态值。我是新来的人。

Answer 1

您必须创建一个对象（例如凭据），当有人单击按钮时，凭据将采用以下状态的道具：

App.js

//import code....
import Form from './Form.js'

//class app code.....

//in the render method:

render() {
    return (
        <Form />
    )
}

Form.js

// import code ....
state = {
   firstName: '', // or what you want
   lastName: '', // or what you want
   email: '', // or what you want
   send: false,
}

//handleChange function
const handleChange = (event) => {
    const {name, value} = event.target
    this.setState({
        [name]: value
    })
}

//handleClick function
const handleClick = () => {
    this.setState({send: true})
}

在“渲染”方法中

render() {
    return (
        <div>
            <input name='firstName' onChange={handleChange} />
            <input name='lastName' onChange={handleChange} />
            <input name='email' onChange={handleChange}/>
            <button onClick={handleClick}>Send</button>

            {send && 
                <Credentials 
                    firstName={this.state.firstName} 
                    lastName={this.state.lastName} 
                    email={this.state.email} 
                />
            }
        </div>
    )
}

export default Form // or your file's name

在Credential.js中

//import code...

const Credentials = ({firstName, lastName, email}) => {
    return (
        <h2>firstName is: {firstName}</h2>
        <h4>lastName is: {lastName}</h4>
        <p>email is: {email}</p>
    )
}

export default Credentials

Answer 2

在React中，您可以使用“ useState”来启动数字或任何类型的输入。然后，当用户单击按钮时设置该数字。

import React, { useState } from "react";
function App() {
  const [number, setNumber] = useState();
  let typedNumber = 0;
  
  const btnHandler = (e) => {
    e.preventDefault();
    setNumber(typedNumber);
  };

  return (
    <div>
      <form onSubmit={btnHandler}>
        <input type="text" onChange={(e) => (typedNumber = e.target.value)} />
        <input type="submit" />
      </form>
      <p>{number}</p>
    </div>
  );
}

export default App;

在React中单击Submit按钮时如何在同一页面上显示状态

2 个答案: