表单输入的值在 React 中提交时未更新

Question

我是 React 新手，正在编写一个基本程序，其中使用两个输入字段和一个按钮，我想通过另一个组件显示提交的数据。 我已经在 App 组件中声明了状态，并使用了 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 中称为Controlled Components。

关于为什么我们在handleChange函数中使用[]，正如您在代码的cmets中已经指出的那样，将状态设置为first和last，它们也是name输入的属性。这种语法称为计算属性，您可以在React docs 中找到对此的解释。

如果您希望Display 组件仅在您按下提交时获取状态，另一种方法是为它们维护两个单独的状态。一个用于表单，另一个用于显示的经过验证的表单。

演示：

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>