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

我在react中创建了一个表单，它从用户那里获取输入并将其存储在状态中。现在，我想在用户单击React中Submit按钮下方的输入字段中的Submit按钮时显示状态值。

---

我是新的反应者。

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

App.js

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

//class app code.....

//in the render method:

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

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

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

在渲染方法中

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

render（）{
返回(
发送
{发送&&
}
)
}
导出默认表单//或文件名

在Credential.js中

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

//class app code.....

//in the render method:

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

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

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

//导入代码。。。
常量凭据=（{firstName，lastName，email}）=>{
返回(
名字是：{firstName}
lastName是：{lastName}
电子邮件是：{email}

)
}
导出默认凭据

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

import React，{useState}来自“React”；
函数App（）{
const[number，setNumber]=useState（）；
设typedNumber=0；
常量btnHandler=（e）=>{
e、 预防默认值（）；
设置编号（类型编号）；
};
返回(
（typedNumber=e.target.value）}/>
{number}

);
}
导出默认应用程序；

能否向我们显示组件的代码？在

渲染

功能中，您将根据状态生成输出。当前如何呈现输出？你想从州里读什么？在form.js中，我已经提交了。My Credentials.js是：const Credentials=（value）=>{return（{value}

）}导出默认凭据在凭据中必须放置：const Credentials=（{value}）/*和{}*/=>{return（{value}

}导出默认凭据。错误在（{value}）因为你必须把卷曲的括号放在上面，我明白了！非常感谢你的帮助：）真的很感谢。还有一件事，在json格式中，它只是将新的数组值附加到以前的数组值上。如果我想覆盖状态值，我应该怎么做？好的，我会尝试类似的方法，但非常感谢您在state或property=''中提供的帮助，当单击botton时，状态（或state的属性）会根据需要从''更改。