[英]How can i add more elements in my object in ReactJS?
嗨,我需要在我的對象中添加一個新元素,但該方法不起作用
這是我的代碼
let datos= [
{ title: "Event 1", id: "1" },
{ title: "Event 2", id: "2" },
{ title: "Event 3", id: "3" },
{ title: "Event 4", id: "4" },
{ title: "Event 5", id: "5" }
]
Capturar(){
const ide = document.getElementById("id").value
const titulo = document.getElementById("titulo").value
datos.push(title, id = titulo, ide)
}
<div>
<input type="text" placeholder='Agregar titulo' id='id' style={{width: "20%", marginRight:"10px"}}/>
<input type="text" placeholder='Agregar titulo' id='titulo' style={{width: "20%", marginRight:"10px"}}/>
<button style={{marginTop: "10px"}} onClick={this.Capturar}>
Agregar tarea
</button>
</div>
import { useState, useRef } from 'react'
const Test = () => {
const defaultValue= [
{ title: "Event 1", id: "1" },
{ title: "Event 2", id: "2" },
{ title: "Event 3", id: "3" },
{ title: "Event 4", id: "4" },
{ title: "Event 5", id: "5" }
]
const [ datos, setDatos] = useState(defaultValue)
const id= useRef(null)
const title = useRef('')
const Capturar = () => {
setDatos([...datos, {title: title.current, id: id.current}])
}
const handleIdChange = (e) => {
id.current = e.target.value
}
const handleTitleChange = (e) => {
title.current = e.target.value
}
return(
<div>
<input type="text"
placeholder='Agregar titulo'
style={{width: "20%", marginRight:"10px"}}
onChange={handleIdChange}
/>
<input type="text"
placeholder='Agregar titulo'
onChange={handleTitleChange}
style={{width: "20%", marginRight:"10px"}}/>
<button style={{marginTop: "10px"}} onClick={Capturar}>
Agregar tarea
</button>
</div>
)
}
export default Test
與類組件:
import React from 'react'
class TestClass extends React.Component {
constructor() {
super();
this.state = {
id: '',
title: '',
datos: [
{ title: "Event 1", id: "1" },
{ title: "Event 2", id: "2" },
{ title: "Event 3", id: "3" },
{ title: "Event 4", id: "4" },
{ title: "Event 5", id: "5" }
],
}
this.capturar = this.capturar.bind(this)
this.handleChange = this.handleChange.bind(this)
}
capturar () {
this.setState({...this.state, datos: [...this.state.datos,{title: this.state.title, id: this.state.id} ] })
}
handleChange = (e) => {
this.setState({...this.state, [e.target.name] : e.target.value })
}
render() {
return <div>
<input type="text"
name='title'
placeholder='Agregar titulo'
style={{width: "20%", marginRight:"10px"}}
onChange={this.handleChange}
/>
<input type="text"
name='id'
placeholder='Agregar titulo'
onChange={this.handleChange}
style={{width: "20%", marginRight:"10px"}}/>
<button style={{marginTop: "10px"}} onClick={this.capturar}>
Agregar tarea
</button>
</div>;
}
}
export default TestClass
你可以試試這個:
import "./styles.css";
import { useState } from "react";
const defaultValues = [
{ title: "Event 1", id: "1" },
{ title: "Event 2", id: "2" },
{ title: "Event 3", id: "3" },
{ title: "Event 4", id: "4" },
{ title: "Event 5", id: "5" }
];
export default function App() {
const [datos, setDatos] = useState([...defaultValues]);
const handleCapturar = () => {
const ide = document.getElementById("id").value;
const titulo = document.getElementById("titulo").value;
setDatos([
...datos,
{ title: ide, id: titulo }
]);
}
return(
<div>
<input
id='id'
type="text"
placeholder='Agregar titulo'
style={{width: "20%", marginRight:"10px"}}
/>
<input
id='titulo'
type="text"
placeholder='Agregar titulo'
style={{width: "20%", marginRight:"10px"}}
/>
<button
style={{marginTop: "10px"}}
onClick={handleCapturar}
>
Agregar tarea
</button>
</div>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.