React app reload, когда он не должен быть

Question

Я написал небольшое приложение. В левой части экрана он отображает список из getInitialState некоторого элемента по одному, а справа мы имеем форму для добавления нового элемента в этот список. Во-первых, когда мы вводим текст во вход, добавьте этот текст в объект в getInitialState. Затем пользователь нажимает «Добавить элемент», и эта функция подталкивает этот объект к списку. Но проблема в том, что здесь произошла перезагрузка, и я не знаю почему. Страница просто перезагрузится, и это обновление списка соответствует его значению по умолчанию.

Вот мой код. Первый файл форма:

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:

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(); 
}