Значение формы ввода не обновляется при отправке в реакции

Question

Я новичок в React и пишу основную программу, в которой с помощью двух полей ввода и кнопки я хочу показать отправленные данные через другой компонент.Я объявил состояние в компоненте приложения и использовал методы handleChange и handleSubmit.Я использовал эти данные состояния в качестве реквизита в компоненте Display.Но я получаю данные, которые отображаются при изменении ввода, а не при отправке.

Посмотрите на мой код:

import React, { Component } from 'react';

import './App.css';



class App extends Component {
  constructor(){
    super();
    this.state={
      first:'',
      last:''
    }
    this.handleChange=this.handleChange.bind(this);
    //this.handleSubmit=this.handleSubmit.bind(this);
  }
//handleChange method will capture the change in the values of input field
//Here [e.target.name]:e.target.value will set the input value to name="first" and name="last"
    handleChange(e){
      this.setState({
      [e.target.name]:e.target.value
      });
    }

    handleSubmit(e){
      e.preventdefault();
      this.handleChange();
    }
  render() {

    return (
      <div className="App">
      <div class="row">
       <input name="first" onChange={this.handleChange}type="text" value={this.state.first}></input>
       </div>
       <div class="row">
       <input name="last" onChange={this.handleChange}type="text" value={this.state.last}></input>
       </div>
       <div class="row">
       <input  name="submit" type="button" onSubmit={this.handleSubmit}></input>
       </div>
       <Display name={this.state.first} last={this.state.last}/>
      </div>

    );
  }
}

const Display=(props)=>{
    return(
      <div>
        <div class="row">
        {props.name}
        </div>
        <div class="row">
        {props.last}
        </div>
      </div>
    )

}




export default App;

Также кто-нибудь может объяснить, почему мы пишем [e.target.name]:e.target.value вsetState и почему мы исправляем его как []?

Answer 1

Используемая вами функция handleChange устанавливает состояние на first и last, соответственно, при их изменении.Этот шаблон называется Контролируемые компоненты в React.

О том, почему мы используем [] в функции handleChange, как вы уже указали в комментариях к своему коду, этоустановите состояние first и last, которые также являются name свойствами ваших входов.Этот синтаксис называется Computed Property, и вы можете найти объяснение этому в React docs .

Если вы хотите, чтобы компонент Display принимал состояние только при нажатии кнопки submit, альтернативаподдерживать два отдельных состояния для них.Один для формы, а другой для подтвержденного, который отображается.

Демо:

const { Component } = React;

class App extends Component {
  constructor(){
    super();
    this.state={
      first:'',
      last:''
    }
    this.handleSubmit=this.handleSubmit.bind(this);
  }
    
  handleSubmit(first, last){
    this.setState({
      first,
      last,
    })
  }
  render() {

    return (
      <div className="App">
       <Form onSubmit={this.handleSubmit} />
       <Display name={this.state.first} last={this.state.last}/>
      </div>

    );
  }
}

class Form extends Component {
  constructor(){
    super();
    this.state={
      first:'',
      last:''
    }
    this.handleChange=this.handleChange.bind(this);
    this.handleSubmit=this.handleSubmit.bind(this);
  }
  
  handleChange(e){
      this.setState({
        [e.target.name]:e.target.value
      });
  }
  
  handleSubmit(e) {
    e.preventDefault();
    this.props.onSubmit(this.state.first, this.state.last);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="row">
       <input name="first" onChange={this.handleChange}type="text" value={this.state.first} />
      </div>
      <div className="row">
       <input name="last" onChange={this.handleChange}type="text" value={this.state.last} />
      </div>
      <div className="row">
       <input  name="submit" type="submit" />
      </div>
     </form>
    );
  }
}

const Display=(props)=>{
    return(
      <div>
        <div className="row">
        {props.name}
        </div>
        <div className="row">
        {props.last}
        </div>
      </div>
    )

}

ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>