如何在 ReactJS 的对象中添加更多元素？

Question

嗨，我需要在我的对象中添加一个新元素，但该方法不起作用

这是我的代码

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>

Answer 1

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

Answer 2

你可以试试这个：

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>
  )
}