Question

我有一个功能组件，但我需要班级组件。因此，我尝试更改此设置，但出现了一些错误，但找不到我想要的内容。

import React, { useState } from 'react';
import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker';

function App() {
  const [value, onChange] = useState([new Date(), new Date()]);

  return (
    <div>
      <DateTimeRangePicker
        onChange={onChange}
        value={value}
      />
    </div>
  );
}
export default App

我尝试了这个，但是没有用：

import React, { Component } from 'react'
import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker';

export default class App extends Component {
  constructor(props){
    super()
    this.state = {
      value:new Date()
    }
  }
  render() {
    return (
      <div>
        <DateTimeRangePicker
          onChange={() => this.setState({value:new Date()})}
          value={this.state.value}
        />    
      </div>
    )
  }
}

Answer 1

如npm page中所述，onChange函数返回一个值。因此，您可以像这样更改类组件：

import React, { Component } from 'react'
import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker';

export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      value:[new Date(), new Date()],
    }
  }
  render() {
    return (
      <div>
        <DateTimeRangePicker
          onChange={(value) => this.setState({value:value})}
          value={this.state.value}
        />    
      </div>
    )
  }
}

如何将功能组件代码更改为类组件

1 个答案: