Как отобразить новое состояние одним нажатием кнопки

Question

Итак, я учусь реагировать, но у меня есть некоторые проблемы с формами.

Я могу изменить состояние после нажатия кнопки в форме.Однако я только смог найти ресурсы, которые показывают мне, как предупредить новое состояние.

Что если я захочу отобразить новое состояние в 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'));

Answer 1

Создание состояния для отображения как части состояния компонента.

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

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

  mySubmitHandler = () => {
    this.setState ({ userNameForDisplay: this.state.userNameForInput });  // update `userNameForDisplay` by 'userNameForInput'
  }

  render() {
      const { userNameForInput, userNameForDisplay } = this.state

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

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

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

               {/* render 'userNameForInput', 'userNameForDisplay' to DOM */}
               {/* the format to render js variable in jsx is '{ jsVariable }' */}
               <div>UserName From Input(update by input change): { userNameForInput }<div>
               <div>UserName For Submit(update by submit button): { userNameForDisplay }<div>
          </form>

      );
  }
}