Question

我是React的新手，我编写了一个基本程序，其中使用两个输入字段和一个按钮，我希望通过另一个组件显示提交的数据。我已经在App组件中声明了状态，并使用了handleChange和handleSubmit方法。我已将此状态数据用作显示组件中的道具。但是我得到的是输入更改时显示的数据，而不是提交时显示的。

看看我的代码：

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的原因，正如您在代码注释中已经指出的那样，是将状态设置为first和{{1} }，它们也是您输入内容的last属性。这种语法称为“计算属性”，您可以在React docs中找到对此的解释。

如果您希望name组件仅在您按Submit时才选择状态，则替代方法是为它们维护两个单独的状态。一个用于表格，另一个用于所显示的经过验证的表格。

演示：

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"));

表单输入的值不会在React中的Submit上更新

1 个答案: