找不到句柄选择反应日期范围

Question

我正在使用 react-date-range 开发一个关于 React js 的项目。如果有人可以提供帮助，它会引起一些问题。

我已经使用这些命令安装了第一个 react-date-range ： npm 安装反应日期范围 & npm install --save react-date-range

但是当我将它导入执行时，它下面会显示一条红线： 从 'react-date-range'

导入 {DateRangePicker}

handleSelect 函数也显示错误， 这是没有导入语句的代码的第一部分：

const PageHeader: React.FC = () => {
    const selectionRange = {
        startDate: new Date(),
        endDate: new Date(),
        key: 'selection',
    }
    handleSelect(ranges){
        console.log(ranges);

    }

这部分显示错误：

*handleSelect(范围){ 控制台日志（范围）；

}*

这是它下面的代码的第二部分：

return (
    <Row>
      <Col span={24}>
        <div className="page-title">
            <b>Charts</b>
        </div>
          <DateRangePicker
              ranges={[selectionRange]}
              onChange={this.handleSelect}
          />
      </Col>

这部分显示错误：

          *onChange={this.handleSelect}*

请注意文件的扩展名是tsx

提前致谢

Answer 1

看来你打错了：

function handleSelect(ranges){ // add the function keyword
     console.log(ranges);
}

或者：

const handleSelect = (ranges) => { // add the arrow function assignment 
     console.log(ranges);
}

另外，我看到您不在类组件中，因此您不需要 this 关键字。

onChange={handleSelect} // right here

Answer 2

因为你使用的是函数组件，所以我们需要声明handleSelect，我们不使用this关键字。

const handleSelect = (ranges: Array<Date>) => {
    console.log(ranges);
}

onChange={handleSelect}