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

Posted 2023-02-23

【中文标题】表单输入的值在 React 中提交时未更新

【英文标题】：Value of Form Input not updating on Submit in React

【发布时间】：2019-07-11 10:11:37

【问题描述】：

我是 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.handleChangetype="text" value=this.state.first></input>
       </div>
       <div class="row">
       <input name="last" onChange=this.handleChangetype="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 中，为什么我们将其设为 []？

【参考方案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.handleChangetype="text" value=this.state.first />
      </div>
      <div className="row">
       <input name="last" onChange=this.handleChangetype="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>

【讨论】：

你能解释一下为什么你在App中声明状态并添加handleSubmit方法吗？还有 this.props.onSubmit(this.state.first, this.state.last);在handleSubmit 中的Form 中做什么？为什么要在这个handleSubmit in Form 中使用props？能否简单介绍一下 App 和 Form 组件的使用逻辑？

App 组件保存从Form 验证和提交的状态，只需按照您的要求显示。 Form 持有的状态是您可以用来验证的状态，直到用户按下提交