无法将 React class 更改为函数

Question

我听说 classes 在 React 中几乎不再使用了，因为函数工作得很好。因此，我将 react-datepicker class 复制到其他地方，现在我正试图将其更改为一个函数。

它不太正确，无论我选择什么，它都会给我今天的日期。日历选择了我想要的日期，但它传递了今天的日期。

Class:

class CalendarClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

  handleChange = date => {
    this.setState({
      date: date
    });
  }

  render() {
    return (
      <div>
        <DatePicker
          selected={this.state.date}
          onChange={this.handleChange}
          minDate={new Date()}
          dropdownMode="select"
        />
        <AddMassageDate date={this.state.date} dateData={this.props.dateData} />
      </div>
    );
  }
}

函数：

function CalendarClass ({ date, dateData }) {

  let [day, setDay] = useState(new Date());

  let handleChange = day => {
    setDay(day);
    date = day;
  };

  return (
    <>
      <DatePicker
        selected={day}
        onChange={handleChange}
        minDate={new Date()}
        dropdownMode="select"
      />
      <AddMassageDate date={date} dateData={dateData} />
    </>
  );
}

Answer 1

问题是您的 date 道具发生了变化，但这种变化不会在组件的渲染之间持续存在。我建议删除 date 道具，只使用 day 状态挂钩。

function CalendarClass ({ dateData }) {

  let [day, setDay] = useState(new Date());

  return (
    <div>
      <DatePicker
        selected={day}
        onChange={d => setDay(d)}
        minDate={new Date()}
        dropdownMode="select"
      />
      <AddMassageDate date={day} dateData={dateData} />
    </div>
  );
}

Answer 2

让我们像这样重构您的组件

const CalendarClass = props => {
const [day, setDay] = useState(new Date());
const { date, dateData } = props;

  const handleChange = day => {
    setDay(day);
    date = day;
  };


    return (
       <>
      <DatePicker
        selected={day}
        onChange={handleChange}
        minDate={new Date()}
        dropdownMode="select"
      />
      <AddMassageDate date={date} dateData={dateData} />
    </>
    );
}

无法将 React class 更改为函数

Trouble changing React class into a function

reactjs

react-datepicker