时间戳

首页 > 解决方案 > 在 Meteor react.Component 中显示数据

reactjs - 在 Meteor react.Component 中显示数据

问题描述

我正在工作流星 js。我遇到了一个问题，因为我是这个环境的新手。我正在处理更新页面。我可以获取数据console.log('Update 1', updateData);。但是如何在我的输入字段值中显示以前的数据updateData？ 

export default class EditEvent extends React.Component{

    EventUpdate(e){
        e.preventDefault();
        console.log('Data submited for updated');


    }

    render(){
        console.log(this.props.match.params.id);

        Meteor.subscribe('allowedData');
        let updateData = Events.findOne({_id:this.props.match.params.id});
        console.log('Update 1', updateData);

        return(
            <div>
                <form className="upload-event-from" onSubmit={this.EventUpdate.bind(this)}>
                    <div className="form-group">
                        <input 
                            value=""
                            type="text" 
                            className="form-control" 
                            id="event_title" 
                            placeholder="Event Title" 
                            name="title"
                        />
                        <span className="error-message">Error Message</span>
                    </div>

                    <div className="form-group fg-icon">
                        <label>Upload Video</label>

                        <input type="file" className="form-control-file form-control" id="exampleFormControlFile1" id="videoupload" />

                        <img src="/img/icons/video.png" alt="Video" />
                    </div>

                    <div className="user-type">
                        Event Status


                    </div>
                    <span id="message" ></span>

                    <center>
                        <button type="submit" className="btn app-btn">Update</button>
                    </center>
                </form>
            </div>
        );
    }

}

标签： reactjsmeteorreact-component

解决方案

您需要使用react-meteor-data专门设计用于将反应数据传递到 Meteor 应用程序中的 React 组件的包。

这是文档

在这种情况下，您需要执行以下操作：

import { withTracker } from 'meteor/react-meteor-data';

class EditEvent extends React.Component{
  EventUpdate(e){
      e.preventDefault();
      console.log('Data submited for updated');
  }

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

      return loading ? null : (
          <div>
              { console.log('eventData', eventData) }
              <form className="upload-event-from" onSubmit={this.EventUpdate.bind(this)}>
                  <div className="form-group">
                      <input 
                          value=""
                          type="text" 
                          className="form-control" 
                          id="event_title" 
                          placeholder="Event Title" 
                          name="title"
                      />
                      <span className="error-message">Error Message</span>
                  </div>

                  <div className="form-group fg-icon">
                      <label>Upload Video</label>

                      <input type="file" className="form-control-file form-control" id="exampleFormControlFile1" id="videoupload" />

                      <img src="/img/icons/video.png" alt="Video" />
                  </div>

                  <div className="user-type">
                      Event Status


                  </div>
                  <span id="message" ></span>

                  <center>
                      <button type="submit" className="btn app-btn">Update</button>
                  </center>
              </form>
          </div>
      );
  }

}

export default withTracker(() => {
 const subscription = Meteor.subscribe('allowedData');

 return {
   loading: !subscription.ready(),
   updateData: Events.findOne({_id:this.props.match.params.id}),
 };
})(EditEvent);

在此示例中，我们使用该withTracker函数创建一个 HOC（高阶组件），它订阅您的 Meteor 订阅，并在数据更改时将数据作为 props 向下传递。

如果你不明白它是如何工作的，我真的建议你做 Meteor react 教程——它将教你如何在 React 应用程序中正确实现订阅。

推荐阅读