Показать данные в Метеоре реагируют. Компонент - PullRequest
Новая
       24

Показать данные в Метеоре реагируют. Компонент

0 голосов
/ 16 ноября 2018

Я работаю метеором 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>
        );
    }

}

1 Ответ

0 голосов
/ 16 ноября 2018

Вам необходимо использовать пакет react-meteor-data, который был специально разработан для передачи реактивных данных в компонент React в приложении Meteor.

Вот документация

В этом случае вам потребуется: 

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 и будетПередавайте данные как реквизиты, когда они меняются.

Если вы не понимаете, как это работает, я действительно предлагаю вам обучающее руководство по Meteor - оно научит вас, как правильно реализовывать подписки в приложениях React.

...