在反应中单击提交按钮时如何在同一页面上显示状态

Question

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

Answer 1

您必须创建一个对象（例如凭据），当有人单击按钮时，凭据会像这样获取状态的道具：

应用程序.js

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

//class app code.....

//in the render method:

render() {
    return (
        <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;