defaultValue is not working in react DatePicker

Question

I have used react-datepicker . I have faced some problem. defaultValue={updateData.date} is not working. It's not showing data. If use value="{updateData.date}" then showing data but its cant edit. How can I solve this? Also, have another problem If I have used placeholderText its showing and working properly but showing an error in the console. console error

    class EditEvent extends React.Component{
        EventUpdate(e){
            e.preventDefault();
            let eventDate = e.target.date.value;
            let myId = this.props.match.params.id;
            Events.update(
                {_id : myId}, 
                {date: eventDate,}, 
                function(err) {
                  if (err){("#message").removeClass("alert-success").addClass("alert-danger").text(err.reason);}
                    else{$('.upload-event-from').trigger("reset");}
                }
            );
        }
 constructor(props) {
            super(props);
            this.state = {startDate: ''};
            this.handleChange = this.handleChange.bind(this);
        }
        handleChange(date) {
            this.setState({
              startDate: date
            });
        }

          render(){
          const {
            loading,
            updateData,
          } = this.props;

          return loading ? null : (
              <div>
               <PrivateHeader title="Discover Page"/>
                  <form className="upload-event-from plr-15" onSubmit={this.EventUpdate.bind(this)}>
                        <div className="form-group fg-icon">
                            <DatePicker
                                defaultValue={updateData.date}
                                className="form-control"
                                id="event_date_time" 
                                name="date"
                                selected={this.state.startDate}
                                onChange={this.handleChange}
                                showTimeSelect
                                timeFormat="HH:mm"
                                timeIntervals={15}
                                dateFormat=""
                                timeCaption="time"
                                autocomplete="off"
                            />
                        </div>
                        <center>
                            <button type="submit" className="btn app-btn">Update</button>
                        </center>
                  </form>
                 <PrivateFooter title="Events Page"/>
              </div>
          );
      }

    }

    export default withTracker((props) => {
        const subscription = Meteor.subscribe('allowedData'); //Dat
        const handle =  props.match.params.id;
        return {
            loading: !subscription.ready(),
            updateData: Events.findOne({_id:handle}),
        };
    })(EditEvent);

Answer 1

根据文档，您的 console.log selected道具需要是instanceOf(Date)而不是字符串，尝试像这样初始化它this.state = {startDate: new Date()};

Answer 2

We can do this using ref on DatePicker component and further assigning it a value using this kind of code. Just look at react.Ref() and as:

this.DateTimePickerElm.current.state.inputValue = newprops.defaultVal;