Reactjs 为什么在实现useState inn react时显示“无效钩子调用”错误

我正在尝试在react中实现

useState

，并且我得到了errore

无效的钩子调用。钩子只能在函数组件的主体内部调用。发生这种情况的原因如下：

这是我试图实现的代码。请帮助我解决此问题

import React, { useState, useEffect, Component } from "react";
import ReactDOM from "react-dom";
class Demo extends Component {
  render() {
    const [fromDate, setFromDate] = useState("");

    const [toDate, setToDate] = useState("");

    const assignFromDate = e => {
      console.log(e.target.value);
      setFromDate(e.target.value);
    };
    return (
      <div className="App">
        <div className="col-sm-4">
          <div className="form-group">
            <span style={{ opacity: "0.6", fontSize: "13px" }}>from</span>
            <input
              type="date"
              name="from"
              id="startdate"
              value={fromDate}
              onChange={assignFromDate}
              className="form-control datepicker"
              style={{ width: "150px" }}
            />
          </div>
        </div>
        <div className="col-sm-4">
          <div className="form-group">
            <span style={{ opacity: "0.6", fontSize: "13px" }}>to</span>
            <input
              type="date"
              name="to"
              min={fromDate}
              id="enddate"
              value={toDate}
              placeholder="Select Date"
              onChange={e => setToDate(e.target.value)}
              className="form-control datepicker"
              style={{ width: "150px" }}
            />
          </div>
        </div>
      </div>
    );
  }
}
export default Demo;

import React，{useState，useffect，Component}来自“React”；
从“react dom”导入react dom；
类Demo扩展了组件{
render（）{
const[fromDate，setFromDate]=useState（“”）；
常量[toDate，setToDate]=useState（“”）；
const assignFromDate=e=>{
console.log（如target.value）；
setFromDate（即目标值）；
};
返回(
从…起
到
setToDate（e.target.value）}
className=“表单控件日期选择器”
样式={{width:“150px”}
/>
);
}
}
导出默认演示；

您必须使用

功能组件而不是
类组件

以下是为您准备的工作演示：

import React，{useState，useffect，Component}来自“React”；
从“react dom”导入react dom；
函数Demo（）{
const[fromDate，setFromDate]=useState（“”）；
常量[toDate，setToDate]=useState（“”）；
const assignFromDate=e=>{
console.log（如target.value）；
setFromDate（即目标值）；
};
返回(
从…起
到
setToDate（e.target.value）}
className=“表单控件日期选择器”
样式={{width:“150px”}
/>
);
}
导出默认演示；

useState将仅在功能组件内部工作。因此，最好将输入移动到一个表示性的coComponent，并在那里使用fromDate和toDate

const输入=（道具）=>{
返回
（this.props.setToDate（e.target.value）}
className=“表单控件日期选择器”
样式={{width:“150px”}}/>）；
}

import React, { useState, useEffect, Component } from "react";
import ReactDOM from "react-dom";

function Demo(){

    const [fromDate, setFromDate] = useState("");

    const [toDate, setToDate] = useState("");

    const assignFromDate = e => {
      console.log(e.target.value);
      setFromDate(e.target.value);
    };

    return (
      <div className="App">
        <div className="col-sm-4">
          <div className="form-group">
            <span style={{ opacity: "0.6", fontSize: "13px" }}>from</span>
            <input
              type="date"
              name="from"
              id="startdate"
              value={fromDate}
              onChange={assignFromDate}
              className="form-control datepicker"
              style={{ width: "150px" }}
            />
          </div>
        </div>
        <div className="col-sm-4">
          <div className="form-group">
            <span style={{ opacity: "0.6", fontSize: "13px" }}>to</span>
            <input
              type="date"
              name="to"
              min={fromDate}
              id="enddate"
              value={toDate}
              placeholder="Select Date"
              onChange={e => setToDate(e.target.value)}
              className="form-control datepicker"
              style={{ width: "150px" }}
            />
          </div>
        </div>
      </div>
    );
}
export default Demo;

const Input = (props) => {
    return
    (<input
    type="date"
    name="to"
    min={fromDate}
    id="enddate"
    value={toDate}
    placeholder="Select Date"
    onChange={e => this.props.setToDate(e.target.value)}
    className="form-control datepicker"
    style={{ width: "150px" }} />);
}

<Input setToDate ={this.setToDate.bind(this)}/>