Javascript 如何在单击按钮时呈现新状态

所以我一直在学习react，但我在表单方面遇到了一些问题

我可以在单击表单中的按钮后更改状态。然而，我只能找到一些资源来告诉我如何提醒新的状态

如果要将新状态呈现到DOM中，该怎么办

我不一定需要答案，但我希望能得到资源，让我自己找出答案，帮助我学习

以下是我得到的：

import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  constructor(props) {
  super(props);
  this.state = { username: '',};
  }

  myChangeHandler = (e) => {
    this.setState ({username: e.target.value});
  }

  mySubmitHandler = () => {
    alert(this.state.username);
  }

  render() {
      return (
          <form>
              <p>Enter your name, and submit:</p>

              <input
                  type='text'
                  onChange={this.myChangeHandler}
              />

              <button onClick={this.mySubmitHandler}>Submit</button>

          </form>

      );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
类MyForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={username:''，}；
}
myChangeHandler=（e）=>{
this.setState（{username:e.target.value}）；
}
mySubmitHandler=（）=>{
警报（this.state.username）；
}
render（）{
返回(
输入您的姓名，然后提交：

提交
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

将显示状态作为组件状态的一部分

类MyForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={userNameForInput:''，userNameForDisplay:''}；//添加'userNameForDisplay'
}
myChangeHandler=（e）=>{
this.setState（{userNameForInput:e.target.value}）；
}
mySubmitHandler=（）=>{
this.setState（{userNameForDisplay:this.state.userNameForInput}）；//通过“userNameForInput”更新“userNameForDisplay”
}
render（）{
const{userNameForInput，userNameForDisplay}=this.state
返回(
输入您的姓名，然后提交：

提交
{/*将“userNameForInput”、“userNameForDisplay”呈现到DOM*/}
{/*在jsx中呈现js变量的格式为“{jsVariable}”*/}
输入的用户名（通过输入更改更新）：{userNameForInput}
提交用户名（通过提交按钮更新）：{userNameForDisplay}
);
}
}

您是否尝试过

this.setState（{…this.state}）

？

render

在组件状态或道具更改时自动调用。因此，只需在呈现的JSX中添加

{this.state.username}

，它就会显示最新的值。谢谢。这工作做得很好！你的解释确实有助于理解。