javascript - defaultValue 在 react DatePicker 中不起作用

标签 javascript reactjs meteor components react-datepicker

我用过 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);

最佳答案

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

关于javascript - defaultValue 在 react DatePicker 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53390102/

相关文章:

javascript - 在单击事件时更改数组中对象的值

Meteor:浏览器后退按钮上的火灾事件

javascript - 手机上的 jsfiddle 替代品?

javascript - 创建一个透明圆柱体

javascript - 如何删除 .append() 然后添加 .append()

reactjs - (0, _reactNavigation.withOrientation) 不是函数错误

javascript - PHP - 像数组一样解析对象的属性

javascript - React 的 reducer 返回与记录值不一致的意外状态

meteor 字体更新

node.js - Meteor 作为 npm 模块的依赖项?错误: Cannot find module 'meteor/mongo'