提问人：mai mohamed 提问时间：11/11/2023 最后编辑：mpromonetmai mohamed 更新时间：11/20/2023 访问量：189
如何使我的按钮向表格中添加元素
how to make my button add an element to the table
问：
我想添加一个按钮，每次单击它时都会向总数添加一个元素：
控制台显示： 未捕获的 TypeError：无法在数字“2”上创建属性“id”
按钮：
<div key={item.id} className="item">
<p onClick={()=>add(item.id)}>+</p>
<p>{item.product}</p>
<p>{item.price}</p>
<p className="delete" onClick={() => del(item.id)}>×</p>
</div>
删除按钮 （X） 正在工作
items 数组：
在代码中：
应用.js：
import './App.css';
import React, {Component} from 'react';
import Items from './components/item/items'
import AddItem from './components/addItem/addItem'
import Total from './components/total/total'
class App extends Component {
state = {
items: [
{id:1, product:'Pen', price:2},
{id:2, product:'Book', price:10}
]
}
deleteItem = (id) => {
let items = this.state.items
let i = items.findIndex(item => item.id === id)
items.splice(i, 1)
this.setState({items: items})
}
addItem = () => {
const { items } = this.state;
const id = items.length ? items[items.length - 1] + 1 : 1;
this.setState({ items: [...items, { id }] });
};
addItem2 = (item) => {
this.state.items.length > 0 ? (
item.id = this.state.items[this.state.items.length - 1].id + 1
) : item.id = 1
console.log(item.id)
let items = this.state.items
items.push(item)
this.setState({items: items})
}
render() {
return (
<div className="container">
<h1>Product List React App</h1>
<div className="table">
<Items items={this.state.items} del={this.deleteItem} add={this.addItem}/>
<AddItem add={this.addItem2}/>
<Total items={this.state.items}/>
</div>
</div>
)
}
}
export default App;
项目.js：
import React from 'react';
const Items = (props) => {
const {items, del,add} = props;
let length = items.length
const ListItem = length ? (
items.map(item => {
return(
<div key={item.id} className="item">
<p onClick={()=>add(item.id)}>+</p>
<p>{item.product}</p>
<p>{item.price}</p>
<p className="delete" onClick={() => del(item.id)}>×</p>
</div>
)
})
) : (
<div className="text">There are no items, Try to add some.</div>
)
return (
<div>
<div className="header item">
<p>quantity</p>
<p>Product</p>
<p>Price</p>
<p>Edit</p>
</div>
{ListItem}
</div>
)
}
export default Items
和总.js：
import React from 'react';
const Total = (props) => {
const {items} = props;
let total = 0
for (let i = 0; i < items.length; i++) {
total += parseFloat(items[i].price)
}
return (
<div>
<p className="text">Total Price: {total}</p>
</div>
)
}
export default Total
答：
0赞
KcH
11/11/2023
#1
你可以这样做
const updatedItems = this.state.items.filter((_,idx)=> idx!= item))
this.setState({items: updatedItems})
delItem 方法内部
添加，在 addItem 方法中
this.setState({items: [...this.state.items, item]})
评论
0赞
mai mohamed
11/11/2023
在代码中的什么位置？
0赞
KcH
11/11/2023
delItem 方法内部
0赞
mai mohamed
11/11/2023
删除按钮工作正常，+ 按钮不起作用
0赞
KcH
11/11/2023
对不起，我的错......将编辑
0赞
KcH
11/11/2023
更新了添加...
0赞
Adrid
11/11/2023
#2
我认为你的功能有问题。addItem
也许，当你点击按钮时，在函数中是数字，而不是对象AdditemaddItem2
{
id : 2
...
}
所以，是错误，因为不是对象。item.id = 3item
您不需要参数，因为此函数仅添加新项目，而不执行任何其他操作。itemitems
我在下面添加代码。
addItem = () => {
const { items } = this.state;
const id = items.length ? items[items.length - 1] + 1 : 1;
this.setState({ items: [...items, { id }] });
};
我认为这个答案可以帮助你。
而且我不知道每一行的按钮和按钮之间的区别。Add+
评论
0赞
mai mohamed
11/11/2023
对不起，它总共给了 NaN
0赞
Adrid
11/11/2023
你是什么意思？
0赞
Adrid
11/11/2023
什么时候打电话？ 按钮还是按钮？addItem Add+
0赞
mai mohamed
11/11/2023
调用 + 按钮时
0赞
Adrid
11/11/2023
你想发生什么？新项目应该去哪里？点击的项目下方？还是在列表的底部？
0赞
RICK Dutta
11/20/2023
#3
只需使用 Dropdown 而不是随机项目： 喜欢这个
form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
0赞
Danilo Flores
11/20/2023
#4
麦。我不确定我是否正确理解了您的问题，但我附上了我的解决方案代码库。希望这对你有帮助。😉
// App.js
import './App.css';
import React, { Component } from 'react';
import Items from './components/Items'
import AddItem from './components/AddItem'
import Total from './components/Total'
class App extends Component {
state = {
items: [
{ id: 1, product: 'Pen', price: 2 },
{ id: 2, product: 'Book', price: 10 }
]
}
deleteItem = (id) => {
let items = this.state.items
let i = items.findIndex(item => item.id === id)
items.splice(i, 1)
this.setState({ items: items })
}
addItem = (itemId) => {
const { items } = this.state;
const id = items.length ? items[items.length - 1].id + 1 : 1;
const item = items[itemId - 1];
this.setState({ items: [...items, { ...item, id }] });
};
addItem2 = (item) => {
this.state.items.length > 0 ? (
item.id = this.state.items[this.state.items.length - 1].id + 1
) : item.id = 1
console.log(item.id)
let items = this.state.items
items.push(item)
this.setState({ items: items })
}
render() {
return (
<div className="container">
<h1>Product List React App</h1>
<div className="table">
<Items items={this.state.items} del={this.deleteItem} add={this.addItem} />
<AddItem add={this.addItem2} />
<Total items={this.state.items} />
</div>
</div>
)
}
}
export default App;
// Total.js
import React from 'react';
const Total = (props) => {
const { items } = props;
let total = 0
for (let i = 0; i < items.length; i++) {
if (items[i].price !== undefined) {
total += parseFloat(items[i].price)
}
}
return (
<div>
<p className="text">Total Price: {total}</p>
</div>
)
}
export default Total
评论
AddItem