在 React 中将日期值发布到 API

Question

我尝试使用 onSubmit 函数将值发布到 API，但它不起作用并且没有返回错误。我能够获取 api 数据但无法发布它。我不知道为什么我的状态没有传递给 API

代码：

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

export default class datatable extends Component {

    constructor() {
        super();
        this.state = {
          datefilter: [],
          startDate: "",
          endDate: ""
    
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleChanges = this.handleChanges.bind(this);
      
      }
      handleChange = event => {
        this.setState({ startDate: event.target.value });
    
      };
      handleChanges = event => {
        this.setState({ endDate: event.target.value });
        console.log(event)
      };
  async componentDidMount() {
    
    if (this.state.startDate == '') {
  
      const response = await fetch('http://localhost:8081/items');
      const data = await response.json();
     
      this.setState({ datefilter: data })
    }
}
    
        onsubmit(){
        axios.post('http://localhost:8081/date',{
     
          sd:this.state.startDate,
          ed:this.state.endDate
            
          } )
              .then(response => this.setState({  datefilter: response.data,
                 
              
              })
             
            )
              .catch(error => {
                  this.setState({ errorMessage: error.message });
                  console.error('There was an error!', error);
              });
    }


  
    
    render() {
        
        return (
            <div>
                <form menthod="POST">
                <input type="date" onChange={this.handleChange}/>
                <input type="date" onChange={this.handleChanges}/>
                <button type="submit" class="btn btn-success" onClick={()=>this.submit() } >Inference</button>
                </form>
               

        <table class="table">
          <thead class="thead-dark">
            <tr>
              <th scope="col">Item ID</th>
              <th scope="col">Item Name</th>
              <th scope="col">Status</th>
              <th scope="col">Date</th>
            </tr>
          </thead>
          <tbody>
            {this.state.datefilter.map(table => (
              <tr>
                <td>{table.ID}</td>
                <td>{table.ItemName}</td>
                <td>{table.Status}</td>
                <td>{table.Date}</td>
              </tr>
            ))}
          </tbody>
        </table>
            </div>
        )
    }
}

我想将日期值发布到后端 api 但它不起作用。我不知道错误在哪里。我是新来的反应

Answer 1

您可以创建一个 onSubmit 函数并将其作为参数传递给您的 html 表单

onSubmit(event) {
 event.preventDefault() // This line will help you to stop reloading the page
 ...
}

<form onSubmit={this.onSubmit}> 
 ... 
 <button type='submit'>Inference</button>
</form>