reactjs - 反应日历不传递日期变量

Question

我试图从函数更改为类组件。代码对函数来说非常好，但是当我更改为类组件时，它似乎没有为我的 Datepicker 和我的输入传递变量。我不确定如何调用 this.state 上的 newEvent。一直在寻找调用 newEvent 的方法，但找不到它们。这是我的类组件代码

export default class OwnCalendar extends Component{
  
  constructor(props){
    
    super(props);
    this.state = {
      newEvent: ({title: "",start: "",end: ""}),
      AllEvent: (events)
    }
   
    this.OnChangeHandlerText = this.OnChangeHandlerText.bind(this);
    this.OnChangeHandlerStart = this.OnChangeHandlerStart.bind(this);
    this.OnChangeHandlerEnd = this.OnChangeHandlerEnd.bind(this); 
    this.OnClickHandler = this.OnClickHandler.bind(this);

  }
  OnChangeHandlerText= (e) =>{
    this.setState({title:[...this.state.newEvent.title, e.target.value]})
  }
  OnChangeHandlerStart(startdate){
    this.setState({start: startdate})
  }
  OnChangeHandlerEnd(enddate){
    this.setState({end: enddate})
  }
  OnClickHandler(){ //handleaddevent
      const newtitle = this.state.newEvent.title
     const newstart = this.state.newEvent.start
      const newend = this.state.newEvent.end
      const obj = {title: newtitle, start: newstart, end: newend}
    // this.setState({events: obj})

      events.push(obj)
  }
  handleAddEvent(){
    this.setState({events: this.state.newEvent})

  }
  render(){

    return (
        
    <div className="App">
      <h1>My Calendar</h1>

    <Popup  trigger={<button> Add New Plan  </button>} position="right center" >
      
    <div><input type = "text" placeholder ="Add Title" style = {{width:"20%",marginRight: "10px"}}
      value = {this.state.title} onChange = {this.OnChangeHandlerText}
      />
      <DatePicker
      placeholderText="Start Date"
      selected={ this.state.start }
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={30}
      timeCaption="time"
      dateFormat="MMMM d, yyyy h:mm aa"
     
    />
    <DatePicker
      placeholderText="End Date"
      selected={this.state.end}
      onChange={(this.OnChangeHandlerEnd)}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={30}
      timeCaption="time"
      dateFormat="MMMM d, yyyy h:mm aa"
    />
      <button style={{marginTop: "10px"}} onClick={this.OnClickHandler}> 
      Add events
      </button></div>
  </Popup>

我的功能代码在这里

function App() {
  
    const [newEvent, setNewEvent] = useState({title: "",start: "", end: ""})
    const [AllEvents, setAllEvents] = useState(events)
    function handleAddEvent(){
    setAllEvents([...AllEvents, newEvent])
    return (
        
    <div className="App">
      <h1>My Calendar</h1>

    <Popup  trigger={<button> Add New Plan  </button>} position="right center" >
      
    <div><input type = "text" placeholder ="Add Title" style = {{width:"20%",marginRight: "10px"}}
      value = {newEvent.title} onChange={(e) => setNewEvent({...newEvent,title: e.target.value})}
      />
      <DatePicker
      placeholderText="Start Date"
      selected={newEvent.start}
      onChange={(start) => setNewEvent({...newEvent,start})}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={30}
      timeCaption="time"
      dateFormat="d MMMM, yyyy h:mm aa"
    />
    <DatePicker
      placeholderText="End Date"
      selected={newEvent.end}
      onChange={(end) => setNewEvent({...newEvent,end})}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={30}
      timeCaption="time"
      dateFormat="d MMMM, yyyy h:mm aa"
    />
      <button style={{marginTop: "10px"}} onClick={handleAddEvent}> 
      Add events
      </button></div>
  </Popup>
      <Calendar localizer = {localizer} events = {AllEvents} 
      startAccessor="start" endAccessor="end"
       style={{height:500,margin:"50px"}}
      eventPropGetter={(events) => {
        const backgroundColor = events.allDay ? 'red' : 'blue';
        return{style:{backgroundColor}}
      }}
      />
      <div>
      <button onClick={() => DepartmentCalendar()} > To department calendar</button>
      </div>

    </div>
    );

标签： reactjsreact-calendar