将日期传递给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;

我在这里尝试做的是将日期传递给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;