不能删除数组项,总是删除错误的项
cannot delete array item, the wrong item always gets deleted
我有一个成份数组,这是通过添加项目从下拉菜单后按下一个按钮,然后当我试图删除一个项目使用deleteIngredient从这个数组按下它的行为在一个奇怪的方式和索引总是返回-1
import React from 'react';
import { Link } from 'react-router';
export default class Order extends React.Component {
constructor() {
super()
this.state = {
selectedCircle:{},
cheeseAdd: false,
ingredient:'',
ingredientsArray: []
};
}
onSelectIngredient(e){
this.setState({
ingredient: e.target.value
})
}
addIngredient(){
this.state.ingredientsArray.push(this.state.ingredient+" ");
this.forceUpdate();
}
deleteIngredient(e) {
var array = this.state.ingredientsArray;
var index = array.indexOf(e.target.value);
console.log(e.target.value);
array.splice(index, 1);
this.setState({ingredientsArray: array });
}
onAddCheese(){
let add = !this.state.cheeseAdd;
this.setState({cheeseAdd : add});
}
saveAndContinue(e){
e.preventDefault();
var pizzaObject = JSON.stringify(this.state.selectedCircle);
var pizza = pizzaObject.substring(2,4);
if(this.state.cheeseAdd == true)
{
var cheeseChoice = "Yes";
}
else{
var cheeseChoice = "No"
}
var data = {
pizzaSize : pizza,
cheese : cheeseChoice,
ingredients : [this.state.ingredientsArray]
}
this.props.saveValues(data);
this.props.changeArrowBlack_1();
this.props.nextCase();
}
toggleChoice(name, event) {
let selected = this.state.selectedCircle;
selected = {};
selected[name] = this.state.selectedCircle[name] == "active-circle" ? "" : "active-circle";
this.setState({selectedCircle: selected});
}
render() {
const { selected } = this.state;
const selectedCircle = selected ? "active-circle":"";
return (
<div class="container card-layout" id="order-layout">
<div class="row">
<div class="card-panel white">
<div class="center">
<h5 class="bold">Your Order</h5>
<p class="margin-top-30 bold">Choose Pizza size in cm</p>
<ul class="margin-top-30">
<li ><div onClick={this.toggleChoice.bind(this, "20")} class={"circle-20 hovered-circle " + this.state.selectedCircle["20"]}>20</div></li>
<li ><div onClick={this.toggleChoice.bind(this, "30")} class={"circle-30 hovered-circle " + this.state.selectedCircle["30"]}>30</div></li>
<li ><div onClick={this.toggleChoice.bind(this, "40")} class={"circle-40 hovered-circle " + this.state.selectedCircle["40"]}>40</div></li>
</ul>
<p class="bold margin-top-20">Ingredients:</p>
<div class="row">
<select class="browser-default col s5 offset-s3" defaultValue="0" onChange={this.onSelectIngredient.bind(this)}>
<option value="0" disabled>Choose Ingredients</option>
<option value="Tomato sauce">Tomato sauce</option>
<option value="Mozarella">Mozarella</option>
<option value="Mushrooms">Mushrooms</option>
<option value="Cheese">Cheese</option>
<option value="Salami">Salami</option>
</select>
<i onClick={this.addIngredient.bind(this)} class="material-icons medium col s1 add-ingredient">add_box</i>
</div>
<div class="row ingredients-row">
{this.state.ingredientsArray.map((item, index) => <span class="col s3" key={index} >{item}<img src="/img/icons/cancel_small.png" onClick={this.deleteIngredient.bind(this)} /></span> )}
</div>
<p class="bold margin-top-30">Cheese rand ?</p>
<div class="switch margin-top-20">
<label>no
<input ref="cheeseRand" type="checkbox" checked={this.state.cheeseAdd} onChange={this.onAddCheese.bind(this)} />
<span class="lever"></span>
yes</label>
</div>
<div class="divider margin-top-30"></div>
<button onClick={this.saveAndContinue.bind(this)} class="waves-effect waves-light btn red-button margin-top-20"><i class="material-icons right">arrow_forward</i>Next</button>
</div>
</div>
</div>
</div>
);
}
}
您没有将项目的索引传递给deleteIngredient()
。在你的map
方法中,你可以这样做:
onClick={this.deleteIngredient.bind(this, index)}
然后在deleteIngredient()
你可以这样访问它:
deleteIngredient(index) {
console.log(index)
...
}
同样,你正在不正确地更新状态,这里是一个快速修复:
deleteIngredient(index) {
console.log(index);
var array = this.state.ingredientsArray.slice();
array.splice(index, 1);
this.setState({ingredientsArray: array });
}
或者,使用过滤器方法:
deleteIngredient(index) {
this.setState({
ingredientsArray: this.state.ingredientsArray.filter((item, i) => i !== index)
});
}
或者,使用ES6扩展操作符:
deleteIngredient(index) {
this.setState({
ingredientsArray: [
...this.state.ingredientsArray.slice(0, index),
...this.state.ingredientsArray.slice(index + 1)
]
});
}
下面是一个演示:http://codepen.io/PiotrBerebecki/pen/bwLyOJ
相关文章:
- PHP 删除错误
- 单选按钮单击删除错误消息 jQuery
- JQuery 验证 - 在表单中添加/删除错误 css 类
- 删除错误.MongooDB + Express.传入的参数必须是 12 个字节的单个字符串或 24 个十六进制字符的字符
- 表单验证:在输入中按键后删除错误
- 如何在调用服务器请求时删除错误
- jQuery 验证错误放置 - 更正后无法删除错误
- 拼接从 AngularJS 中的 ng-repeat 中删除错误的对象
- 如何从电子邮件格式检查器代码中删除错误文本
- 从数组中删除错误的值会留下空值.如何改进我的代码
- 如果onclick按钮,在js中删除错误信息
- 删除错误-无法处理绑定“foreach”
- 不能删除数组项,总是删除错误的项
- jqGrid后删除错误
- 如何根据类名删除错误
- 在弹出窗口中onfocus以删除错误
- 如何隐藏/删除错误信息后显示它给用户后几秒钟在javascript
- Javascript:表单验证-从更正字段中删除错误消息
- Javascript从DOM中删除错误的元素
- 从jQuery validate中重置窗体/删除错误类