javascript - react : Edit existing selected images in a slideshow

Question

我正在开发一个幻灯片应用程序并使用 viewerJS 作为插件。我能够创建幻灯片并保存所有选定的图像。但是，现在我正在研究返回并编辑每个单独的幻灯片的能力。我希望能够从幻灯片中删除或添加图像。下面是该框架的代码:

var CreateUpdateShowComponent = React.createClass({
getInitialState: function(){
return {
  momentCollection: [],
  moment: [],
  'slideshow': new SlideShow()
 };
},
componentWillMount: function(){
var self = this;
var momentCollection = new MomentCollection();
var slideshow = this.state.slideshow;

momentCollection.fetch().done(function(){
  self.setState({'momentCollection': momentCollection})

  if(self.props.slideshowId){
    slideshow.set('id', self.props.slideshowId);

    slideshow.fetch().done(function(){
      var slideshowIds = slideshow.get("moments").map(function(moment){return moment.id})
      momentCollection.determineMomentSelectedState(slideshowIds)
      console.log("momentCollection is ", momentCollection);
      self.setState({
        'slideshow': slideshow,
        'title': slideshow.get('title'),
        'description': slideshow.get('description'),
      });

    });
  }
});

},
handleChange: function(moment){
var self = this;
console.log("moment is",moment);
var isSelected = moment.get('selected');
moment.set("selected", !isSelected);
// re-render here
},
handleTitleChange: function(e){
this.setState({'title': e.target.value});
},
handleDescriptionChange: function(e){
// var slideshow = slideshow.get('description')
this.setState({'description': e.target.value});
},
handleSave: function(){
var self = this;
/ Build an array of the selected image ids
var selectedMoments =        _.pluck(this.state.momentCollection.where({selected: true}), 'id');
console.log(this.state.description);
// Create new slideshow
var slideshow = this.state.slideshow;
slideshow.set({
  'title': this.state.title,
  'description': this.state.description,
  'moment_ids': selectedMoments,
});

slideshow.save().then(function(resp){
  self.props.router.navigate('slide', {trigger: true});
  slideshow.fetch();
  console.log(slideshow);
})
},
handleSelectedState: function(moment, e){
moment.set("selected", !moment.get("selected"))
this.forceUpdate();
},

render: function(){
console.log(this.state.slideshow);
var self = this;

var momentListDisplay = this.state.momentCollection.map(function(moment, index){
  return (
    <li className={"image-thumb col-xs-2 " + (moment.get('selected') ? 'active' : '')}  data-moment-id={moment.get("id")} onClick={function(){ self.handleSelectedState(moment) }} key={index}>
      <label className="image-holder"  htmlFor={index}>
        <div className="select-indicator">
          <div className={moment.get("selected") ? "active-indicator active" : "active-indicator"}></div>
        </div>
        <img className={moment.get("selected") ? "slideshow-image selected" : "slideshow-image"}  width={moment.getThumbWidth()} height={moment.getThumbHeight()} src={moment.get("dropbox_path")}></img>
      </label>
    </li>
  )
});

Answer 1

你的代码很乱。为了能够添加或删除幻灯片，您必须为这些操作创建一个处理程序，并在处理程序中编辑状态，如下所示:

addSlide: function(slide, id, etc..) {
    this.setState(your_new_state); 
}

然后只需使用创建幻灯片所需的正确参数调用 addSlide。您可以将 addSlide 处理程序“附加”到 HTML 按钮。

请记住始终使用 this.setState() React 方法，因为此方法将更新 HTML View 。