将日期传递给componentDidMount中的函数

Question

import React, { Component } from 'react';
import './App.css';
import { Calendar } from 'react-date-range';
import axios from 'axios';
import Grids from './containers/Grids/Grids';
class App extends Component {

  constructor(props) {
    super(props);
    this.state = {process_vch: []};
  }

 componentDidMount() {
  this.handleSelect(this.props.date) (
  axios.get('http://localhost:4200/api/process',{params: {this.props.date: date._d}})
  .then(response => {
    this.setState({ process_vch: response.data });
  })
  .catch(function (error) {
    console.log(error);
  })
)
}


  render() {
      return (
      <div className="App">
        <Calendar
           onInit={this.handleSelect}
           onChange={this.handleSelect} />
        <div>DropDown</div>
        <Grids data={this.state.process_vch}/>
      </div>
    );
  }
}

export default App;

我要在这里做的是在应用初始化时将日期传递给handleSelect函数，并从后端获取数据，但是我遇到的错误是this.handleSelect不是函数。

Answer 1

如果要使用通过道具传递的onInit方法，则应在组件类this.props.onInit()中使用

Answer 2

下面是处理事件函数的简单示例。

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
    // This line is important!
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert(this.state.message);
  }

  render() {
    // Because `this.handleClick` is bound, we can use it as an event handler.
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }

Answer 3

弄清楚如何工作是创建handleSelect函数并记录日期的良好起点

....
    constructor(props) {
        super(props);
        this.state = { process_vch: [] };
    }

    handleSelect = (date) =>{
        console.log(date);
    }

    componentDidMount() {
.....

Answer 4

您可以通过以下方式完成

您可以直接在componentDidMount中进行ajax调用

import React, { Component } from 'react';
import './App.css';
import { Calendar } from 'react-date-range';
import axios from 'axios';
import Grids from './containers/Grids/Grids';
class App extends Component {

  constructor(props) {
    super(props);
    this.state = {process_vch: []};
  }

 componentDidMount() {
  axios.get('http://localhost:4200/api/process',{params: {this.props.date: date._d}})
  .then(response => {
    this.setState({ process_vch: response.data });
  })
  .catch(function (error) {
    console.log(error);
  })
}


  render() {
      return (
      <div className="App">
        <Calendar
           onInit={this.handleSelect}
           onChange={this.handleSelect} />
        <div>DropDown</div>
        <Grids data={this.state.process_vch}/>
      </div>
    );
  }
}

export default App;

或ES6-将ajax调用功能移至ES6箭头功能，然后在componentDidMount中调用该功能

import React, { Component } from 'react';
import './App.css';
import { Calendar } from 'react-date-range';
import axios from 'axios';
import Grids from './containers/Grids/Grids';
class App extends Component {

  constructor(props) {
    super(props);
    this.state = {process_vch: []};
  }

componentDidMount() {
  this.handleSelect(this.props.date);
}

handleSelect = d => {
  axios.get('http://localhost:4200/api/process',{params: {d: date._d}})
  .then(response => {
    this.setState({ process_vch: response.data });
  })
  .catch(function (error) {
    console.log(error);
  })
}


  render() {
      return (
      <div className="App">
        <Calendar
           onInit={this.handleSelect}
           onChange={this.handleSelect} />
        <div>DropDown</div>
        <Grids data={this.state.process_vch}/>
      </div>
    );
  }
}

export default App;

或ES5-将您的Ajax调用功能移至ES5普通功能并在componentDidMount中调用该功能

import React, { Component } from 'react';
import './App.css';
import { Calendar } from 'react-date-range';
import axios from 'axios';
import Grids from './containers/Grids/Grids';
class App extends Component {

  constructor(props) {
    super(props);
    this.state = {process_vch: []};
    this.handleSelect = this.handleSelect.bind(this);
  }

componentDidMount() {
  this.handleSelect(this.props.date);
}

handleSelect(d) {
  axios.get('http://localhost:4200/api/process',{params: {d: date._d}})
  .then(response => {
    this.setState({ process_vch: response.data });
  })
  .catch(function (error) {
    console.log(error);
  })
}


  render() {
      return (
      <div className="App">
        <Calendar
           onInit={this.handleSelect}
           onChange={this.handleSelect} />
        <div>DropDown</div>
        <Grids data={this.state.process_vch}/>
      </div>
    );
  }
}

export default App;