Question

我正在尝试实现一种简单的表单，该表单在React中的表单提交上触发API调用。

当尝试以下代码时，它使我震惊：

import React, { Component } from 'react';
   import axios from 'axios';

var panelStyle = {
    'max-width': '80%',
    margin: '0 auto'
}

class DBInject extends Component {
  constructor() {
   super();
   this.formHandler = this.formHandler.bind(this);
    this.state = {
      formFields: {Id: '',
      Name: '',
      Payment: "01-10-2019",
      Type: '',
      Value: 110,
      Cycle:'',
      Frequency:''
    }
    }
  }

  render() {
    return(
     <div>
    <div class="panel panel-primary" style={panelStyle}>
      <div class="panel panel-heading">React Forum - Register</div>
      <div class="panel panel-body">
        <form onsubmit={this.formHandler(this.state.formFields)}>
          <strong>Id:</strong> <br /> <input type="text" name="Id" placeholder="123" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.Id} /> <br />
          <strong>Name:</strong> <br /> <input type="text" name="Name" placeholder="me@example.com" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.Name}/> <br />
          <strong>Cycle:</strong> <br /> <input type="text" name="Cycle" placeholder="me@example.com" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.Cycle} /> <br />
          <strong>Frequency:</strong> <br /> <input type="text" name="Frequency"  onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.Frequency}/> <br />
          <strong>Type:</strong> <br /> <input type="text" name="Type" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.Type} /> <br />
          <strong>Payment:</strong> <br /> <input type="date" name="Payment"  onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.Payment}/> <br />
          <strong>Value:</strong> <br /> <input type="number" name="Value"  onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.Value}/> <br /><br />
          <button class="btn btn-primary">Send to database</button>
        </form>
      </div>
    </div>
  </div>

    );
  }

  inputChangeHandler(e) {
    console.log(e);
   let formFields = {...this.state.formFields};
   formFields[e.target.name] = e.target.value;
   this.setState({
    formFields
   });
  };

  formHandler(formFields) {
    console.log(formFields);
    alert('This button does nothing.');
   axios.post('http://127.0.0.1:1880/api','', {headers:formFields})
     .then(function(response){
       console.log(response);
       //Perform action based on response
   })
     .catch(function(error){
       console.log(error);
       //Perform action based on error
     });
  }
}

export default DBInject

formHandler每当InputchangeHandler被调用时都会被调用-这不是我的意图。

在React中还有其他更简单的方法吗？

Answer 1

每次调用setState时，组件都会重新呈现。您的form元素在每次重新渲染时都会调用该函数。您需要进行以下更改：

#Update onsubmit
<form onsubmit={this.formHandler.bind(this)}>

#Reference the formFields directly from the component's state
formHandler() {
const { formFields } = this.state;

Answer 2

您可以在此处阅读有关React表单的更多信息： https://reactjs.org/docs/forms.html

请确保从处理程序函数内部引用状态，而不要传入它-因为这会使您的函数在每次状态更新时重新呈现。

表单元素：

//make sure the "S" in submit is capitalized
<form onSubmit={this.formHandler}>

  ...Your Form Contents

</form>

处理函数：

formHandler(e) {
  e.preventDefault() // stop propagation at the start

  // reference state from here with this.state like so:
  const { formFields } = this.state;

  ...Your handler code
}

每个表单字段更改都会触发onsubmit

2 个答案: