如何在对象数组中添加一个对象?ReactJS? [英] How to add an object in an array of objects? ReactJS?
问题描述
我的项目是一个对象数组,其中我只获取名称并在 3 合 3 的屏幕上呈现,使用下一个和上一个按钮更改名称,并且可以过滤字母.
我想添加一个新值,在输入中输入并单击 add
按钮.
我的代码按钮:
addItem = () =>{const inValue = {编号:0,名称:this.state.input}this.setState({过滤:this.state.filtered.concat(inValue),当前页面:0})}
我希望将值插入到 filtered
数组中.
我的代码全部:
import React, { Component } from 'react';类 App 扩展组件 {构造函数(){极好的();const peoples =[{id:0, name:"Jean"},{id:1, name:"Jaha"},{id:2, name:"Rido"},{id:3, name:"Ja"},{id:4, name:"Letia"},{id:5, name:"Di"},{id:6, name:"Dane"},{id:7, name:"Tamy"},{id:8, name:"Tass"},{id:9, name:"Ts"},{id:10, name:"Abu"},{id:11, name:"Ab"}];this.state = {每页元素:3,当前页:0,人们,输入: "",过滤:人民,睾丸:'',};}getValueInput = (evt) =>{const inputValue = evt.target.value;this.setState({ input: inputValue });this.filterNames(inputValue);}filterNames = (inputValue)=>{const { people} = this.state;this.setState({过滤:peoples.filter(item =>item.name.includes(inputValue)),当前页:0});const Oi = this.state.filtered.map(item=>item.name);if(Oi.length<=0){alert('Você está adicionando um nome')}控制台日志(Oi)}elementOnScreen = () =>{const {elementsPerPage,currentPage,filtered} = this.state;返回过滤.map((item) => {item.name} ).slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage);if(this.state.filtered.length < 1){this.setState({currentPage: this.state.currentPage - 1})}}移除 = (id) =>{console.log(this.state.filtered.length)if(this.state.filtered.length <0){this.setState({currentPange: this.state.currenPage - 1})}this.setState({filtered: this.state.filtered.filter(item => item.name !== id) })}nextPage = () =>{console.log(this.state.filtered)const {elementsPerPage,currentPage,filtered} = this.state;if ((currentPage+1) * elementsPerPage {const { currentPage } = this.state;if(currentPage - 1 >= 0){this.setState({ currentPage: this.state.currentPage - 1 });}}addItem = () =>{const inValue = {id:0 ,name: this.state.input}this.setState({filtered: this.state.filtered.concat(inValue), currentPage: 0})}使成为() {返回 (<div><button onClick={this.addItem}>添加</button><input type="text" onChange={ this.getValueInput }></input><button onClick={this.previousPage}>上一个 </button><button onClick={this.nextPage}>下一个</button><h3>当前页面:{this.state.currentPage}</h3><ul>名称:{this.elementsOnScreen()}</ul>
);}}导出默认应用;
您将拥有包含在状态中的对象数组,然后使用 setState
this.state = {每页元素:3,当前页:0,人们,输入: "",过滤:人民,睾丸:'',人们: [{id:0, name:"Jean"},{id:1, name:"Jaha"},{id:2, name:"Rido"},{id:3, name:"Ja"},{id:4, name:"Letia"},{id:5, name:"Di"},{id:6, name:"Dane"},{id:7, name:"Tamy"},{id:8, name:"Tass"},{id:9, name:"Ts"},{id:10, name:"Abu"},{id:11, name:"Ab"}];};
要更新 peoples 数组,您首先需要创建 peoples 数组的副本,修改副本,然后使用 setState 进行更新.
let { peoples } = this.state;peoples.push({ id:12, name:"Jean"})this.setState({peoples: peoples})
My Project is, an array of objects where i get only the names and render on screen of form 3 in 3, with button next and previous change the names, and can to filter for letters.
I would want add a new value, typped on input and clicked in the button add
.
My code button:
addItem = () => {
const inValue = {
id: 0,
name: this.state.input
}
this.setState({
filtered: this.state.filtered.concat(inValue),
currentPage: 0
})
}
I would want the value inserted in the filtered
array.
My code all:
import React, { Component } from 'react';
class App extends Component {
constructor() {
super();
const peoples =[{id:0, name:"Jean"},
{id:1, name:"Jaha"},
{id:2, name:"Rido"},
{id:3, name:"Ja"},
{id:4, name:"Letia"},
{id:5, name:"Di"},
{id:6, name:"Dane"},
{id:7, name:"Tamy"},
{id:8, name:"Tass"},
{id:9, name:"Ts"},
{id:10, name:"Abu"},
{id:11, name:"Ab"}];
this.state = {
elementsPerPage:3,
currentPage:0,
peoples,
input: "",
filtered: peoples,
teste: '',
};
}
getValueInput = (evt) => {
const inputValue = evt.target.value;
this.setState({ input: inputValue });
this.filterNames(inputValue);
}
filterNames = (inputValue)=> {
const { peoples } = this.state;
this.setState({
filtered: peoples.filter(item =>
item.name.includes(inputValue)),
currentPage:0
});
const Oi = this.state.filtered.map(item=>item.name);
if(Oi.length<=0){
alert('Você está adicionando um nome')
}
console.log(Oi)
}
elementsOnScreen = () => {
const {elementsPerPage, currentPage, filtered} = this.state;
return filtered
.map((item) => <li key={item.id}> {item.name} <button onClick={() => this.remove(item.name)}> Delete </button> </li>)
.slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage);
if(this.state.filtered.length < 1){
this.setState({currentPage: this.state.currentPage - 1})
}
}
remove = (id) => {
console.log(this.state.filtered.length)
if(this.state.filtered.length < 0){
this.setState({currentPange: this.state.currenPage - 1})
}
this.setState({filtered: this.state.filtered.filter(item => item.name !== id) })
}
nextPage = () => {
console.log(this.state.filtered)
const {elementsPerPage, currentPage, filtered} = this.state;
if ((currentPage+1) * elementsPerPage < filtered.length){
this.setState({ currentPage: this.state.currentPage + 1 });
}
}
previousPage = () => {
const { currentPage } = this.state;
if(currentPage - 1 >= 0){
this.setState({ currentPage: this.state.currentPage - 1 });
}
}
addItem = () =>{
const inValue = {id:0 ,name: this.state.input}
this.setState({filtered: this.state.filtered.concat(inValue), currentPage: 0})
}
render() {
return (
<div>
<button onClick={this.addItem}> Add </button>
<input type="text" onChange={ this.getValueInput }></input>
<button onClick={this.previousPage}> Previous </button>
<button onClick={this.nextPage}> Next </button>
<h3>Current Page: {this.state.currentPage}</h3>
<ul>Names: {this.elementsOnScreen()}</ul>
</div>
);
}
}
export default App;
You would have the array of objects contained within your state, then use setState
this.state = {
elementsPerPage:3,
currentPage:0,
peoples,
input: "",
filtered: peoples,
teste: '',
peoples: [
{id:0, name:"Jean"},
{id:1, name:"Jaha"},
{id:2, name:"Rido"},
{id:3, name:"Ja"},
{id:4, name:"Letia"},
{id:5, name:"Di"},
{id:6, name:"Dane"},
{id:7, name:"Tamy"},
{id:8, name:"Tass"},
{id:9, name:"Ts"},
{id:10, name:"Abu"},
{id:11, name:"Ab"}];
};
To update the peoples array, you would first need to create a copy of the peoples array, modify the copy, then use setState to update.
let { peoples } = this.state;
peoples.push({ id:12, name:"Jean"})
this.setState({peoples: peoples})
这篇关于如何在对象数组中添加一个对象?ReactJS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!