Question

我用过react-datepicker。我遇到了一些问题。 defaultValue = {updateData.date}无法正常工作。它没有显示数据。如果使用value="{updateData.date}"，则显示数据，但无法编辑。我该如何解决？另外，还有另一个问题，如果我使用了placeholderText，它会显示并正常工作，但在控制台中显示错误。 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

我们可以使用DatePicker组件上的ref来做到这一点，并使用这种代码进一步为它分配一个值。只需看一下react.Ref（）即可：

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

defaultValue在反应DatePicker中不起作用

2 个答案: