Question

我正在工作流星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>
        );
    }

}

Answer 1

您需要使用react-meteor-data软件包，该软件包专门用于将反应性数据向下传递到Meteor应用程序中的React组件。

Here is the documentation

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

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（高阶组件），该HOC订阅您的Meteor订阅，并在数据更改时将其作为道具传递下来。

如果您不了解这是如何工作的，我真的建议您做一份Meteor react教程-它会教您如何在React应用程序中正确实现订阅。

在Meteor react.Component中显示数据

1 个答案: