React应用程序重新加载时,它不应该是
问题描述:
我写了一个小应用程序。在屏幕左侧,它会逐个显示某个项目的getInitialState
列表,在右侧我们会有一个表格将新项目添加到此列表中。 首先,当我们在输入中键入一些文本时,它将此文本添加到getInitialState
中的对象。然后,用户点击“添加项目”,该功能将该对象推送到列表中。但麻烦的是,这里发生了重新加载,我不知道为什么。页面只是重新加载,这个列表更新为默认值。React应用程序重新加载时,它不应该是
这是我的代码。第一个文件是格式:
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;
感谢您的任何想法。
答
您还没有禁用提交按钮因此结束实际提交表单正常的默认行为,所以更改处理程序:
submitNewFilm: function(e) {
e.preventDefault();
this.props.onClick();
}
防止浏览器默认的onsubmit行为.. –
你是什么意思? –