Question

我写了一个小应用程序。在屏幕的左侧，它会逐一显示某个项目的getInitialState列表，右侧会显示一个表单，以便在此列表中添加新项目。首先，当我们在输入中键入一些文本时，它会将此文本添加到getInitialState中的对象中。然后，用户点击＆＃34;添加项目＆＃34;并且此函数将此对象推送到列表。但麻烦的是，这里发生了重装，我不知道为什么。页面只是重新加载，此列表更新为默认值。

这是我的代码。第一个文件是表格：

import React from 'react';

var iAmForm = React.createClass({
  submitNewFilm: function() {
    this.props.onClick();
  },

  handleChange: function(e) {
    var whatIsDiff = e.target.value;
    var whereIsDiff = e.target.id;
    this.props.onChange(whatIsDiff, whereIsDiff);

  },
  render: function() {
    return (
      <div className="row row-content">
          <div className="col-xs-12 col-sm-11">
              <form className="form-horizontal" role="form" onChange={this.handleChange}>
                  <div className="form-group">
                      <label htmlFor="firstname" className="col-sm-2 control-label">Title</label>
                      <div className="col-sm-10">
                      <input type="text" className="form-control" id="title" name="title" placeholder="Enter Film Title"/>
                      </div>
                  </div>
                  <div className="form-group">
                      <label htmlFor="lastname" className="col-sm-2 control-label">Year</label>
                      <div className="col-sm-10">
                          <input type="text" className="form-control" id="year" name="year" placeholder="Enter Film Year"/>
                      </div>
                  </div>

                  <div className="form-group">
                      <label htmlFor="emailid" className="col-sm-2 control-label">Quality</label>
                      <div className="col-sm-10">
                          <input type="text" className="form-control" id="quality" name="quality" placeholder="Quality"/>
                      </div>
                  </div>

                  <div className="form-group">
                      <label htmlFor="feedback" className="col-sm-2 control-label">Stars</label>
                      <div className="col-sm-10">
                          <textarea className="form-control" id="stars" name="stars" rows="12"></textarea>
                      </div>
                  </div>
                  <div className="form-group">
                      <div className="col-sm-offset-2 col-sm-10">
                          <button type="submit" className="btn btn-primary" onClick={this.submitNewFilm}>Add Film</button>
                      </div>
                  </div>
              </form>
          </div>

     </div>
    )
  }
})

module.exports = iAmForm;

比第二个文件是将在ReactDom.render中呈现的App：

import React from 'react';

var IchBinForm = require('./IchBinForm');
var SortFilms = require('./SortFilms');
var SearchFilm = require('./SearchFilm');
var FilmShort = require('./FilmShort.js');
var FilmLong = require('./FilmLong.js');

var App = React.createClass({
  getInitialState: function() {
    return {list: [
        {id:'1',
        title: 'The Baby Boss',
        year: '2017',
        quality: 'Blu-ray',
        stars: 'Fred Astaire, Humphrey Bogart, Marlon Brando, Richard Burton, Charlie Chaplin',
        Show: true
        },
        {id:'2',
        title: 'Pirates of the Caribbean: Dead Men Tell No Tales ',
        year: '2016',
        quality: 'HDrip',
        stars: 'John Depp, Orlando Bloom, Javier Bardem, Kaya Scodelario, Brenton Thwaites',
        Show: true
        },
        {id:'3',
        title: 'Fast 8',
        year: '2016',
        quality: 'Blu-ray',
        stars: 'Vin Diesel, Dwayne Johnson, Jason Statham, Michelle Rodriguez, Tyrese Gibson',
        Show: true
        }
      ],
      newFilm: {
        id:'',
        title: '',
        year: '',
        quality: '',
        stars: [],
        Show: true
      }
    }
  },

  changeShow: function(newShow, filmId) {
    this.setState({
      list: this.state.list.map(function(film) {
        if (film.id == filmId) {
          film.Show = newShow;
        }
        return film;
      })
    });
  },

  deleteFilm: function(id) {
    for (var film=0; film < this.state.list.length; film++) {
      if (this.state.list[film].id == id) {
        this.state.list.splice(film, 1);
      }
    };
    this.setState({
      list: this.state.list
    })
  },

  seeForChangeInForm: function(change, id) {
    var newId = this.state.list.length + 1

    if (id == 'title') {
      var whatChange = {
        id: newId,
        title: change,
        year: this.state.newFilm.year,
        quality: this.state.newFilm.quality,
        stars: this.state.newFilm.stars,
        Show: this.state.newFilm.Show
      }
    }
    else if (id == 'year') {
      var whatChange = {
        id: newId,
        title: this.state.newFilm.title,
        year: change,
        quality: this.state.newFilm.quality,
        stars: this.state.newFilm.stars,
        Show: this.state.newFilm.Show
      }
    }
    else if (id == 'quality') {
      var whatChange = {
        id: newId,
        title: this.state.newFilm.title,
        year: this.state.newFilm.year,
        quality: change,
        stars: this.state.newFilm.stars,
        Show: this.state.newFilm.Show
      }
    }
    else if (id == 'stars') {
      var whatChange = {
        id: newId,
        title: this.state.newFilm.title,
        year: this.state.newFilm.year,
        quality: this.state.newFilm.quality,
        stars: change,
        Show: this.state.newFilm.Show
      }
    }
    this.setState({newFilm:whatChange})
    //alert(this.state.newFilm.id)
  },

  addNewFilm: function() {
    var newList = this.state.list.push(this.state.newFilm);

    this.setState({list:this.state.list})
    alert(newList)
  },

  render: function() {
    return (
      <div className="row">
        <h1 style={{textAlign:'center'}}>Hi, my name is Cir. I am 19, from Kiev, Ukraine. How are you ?</h1>
        <div className="col-md-8">
          <div>
            <div className="row">
              <div className="col-md-9" style={{marginLeft:'40px'}}>
                <SearchFilm/>
              </div>
              <div className="col-md-2" style={{float: 'right'}} >
                <SortFilms/>
              </div>
            </div>
            <div className="row">
             <div className="col-md-12">
              <ul>

                 {this.state.list.map((film) => (
                   <div>
                   {film.Show ? <FilmLong onDeleteClick={this.deleteFilm} onShowClick={this.changeShow} filmInArray={film}/>:<FilmShort onClick={this.changeShow} filmInArray={film}/>}
                   </div>
                 ))}

              </ul>
             </div>
            </div>
          </div>
        </div>
        <div className="col-md-4">
          <IchBinForm onChange={this.seeForChangeInForm} onClick={this.addNewFilm}/>
        </div>
      </div>
    );
  }
});

module.exports = App;

感谢任何想法。

Answer 1

您尚未禁用提交按钮的默认行为，因此它实际上正常提交表单，因此请将该处理程序更改为：

submitNewFilm: function(e) {
  e.preventDefault();
  this.props.onClick();
}

反应应用程序重新加载时不应该

1 个答案: