javascript - react 已编辑。来自另一个组件的触发函数: TypeError: refreshmap is not a function

Question

我想在选择日期后重新加载页面。我有一个名为刷新 map 的 Prop 。

我是 react 新手。

我想在日期更改时触发函数(“refreshmap”):

import React, { Component } from 'react';
import DateTimePicker from 'react-datetime-picker';
import MapLeaflet2 from './MapLeaflet2';


class Picker extends Component {
  state = {
    date: new Date(),
  }



  onChange = (date,refreshmap) => this.setState({date},
    function(){

      const DateContext =this.state.date;
      refreshmap()


    })

  render() {

    return (

      <div>
        <DateTimePicker
          onChange={(date) => this.onChange(date, this.refreshmap)} 
          value={this.state.date}
        />
         <MapLeaflet2 date = {this.state.date.toString()}/>


         )}         
      </div>
    );
  }
}

export default Picker;

这里我得到这个错误:

TypeError: refreshmap is not a function

作为示例，我在这里将其用作按钮。效果很好。

import React from 'react';
import mapButtonStyles from './mapButtonStyles';

const RefreshButton = ({ refreshmap}) => (
  <button
    type="button"
    style={mapButtonStyles}
    className="map-button"
    onClick={refreshmap}
  >
    <i className="fas fa-sync-alt fa-2x" />
  </button>
);

export default RefreshButton;

它可以与按钮组件完美配合，但不能与选择器配合使用。我收到错误消息 TypeError:refreshmap 不是函数

如上所述，我是新手，因此任何建议或观察都将非常有值(value)!

Answer 1

我想你可以在 onChange 函数中触发刷新 map 函数:

onChange = date => this.setState({date},
function(){
  const DateContext =this.state.date;
  this.props.refreshmap();
})

与:

<DateTimePicker
      onChange={this.onChange}
      value={this.state.date}
    />