Реагировать - Как я могу извлечь значения из формы и обновить мое состояние?

Question

Я учусь реагировать и застрял с этой проблемой.

Я создал состояние для пользователей с двумя свойствами имя & твит в моем App.js компоненте и Tweet.js Компонент получает данные из состояния и выводит твит на DOM.

Я хочу создать нового пользователя в моем состоянии при отправке формы. Как я могу это сделать?

App.js

import React, {useState} from 'react';
import Tweet from './Tweet';

function App () {

  const [users, setUsers] = useState([
    {name:'Coulson', tweet:'Avengers Assemble'},
    {name:'Rick', tweet:'Living in world of dead.'},
    {name:'Barry', tweet:'I am the Flash.'},
    {name:'Judith', tweet:'Hi Carl.'},
    {name:'Michonne', tweet:'I have a katana.'},
    {name:'Bob', tweet:'Lets build something.'},
  ])

  return(
    <div className="App">
      <div className="form">
        <form>
          <label htmlFor="name">Name</label> <input type="text" />
          <label htmlFor="tweet">Tweet</label> <input type="text" />
          <button>Submit</button>
        </form>

      </div>
      {users.map(user => (
          <Tweet name={user.name} tweet={user.tweet} />
      ))}
    </div>
  )

}

export default App;

Tweet.js

import React from 'react'
import "./App.css"

function Tweet ({name, tweet, likes}) {

    return(
        <div className="tweet">
            <h3>{name}</h3>
            <p>{tweet}</p>
            <h3>Likes: {likes}</h3>
        </div>
    )
}

export default Tweet;

Answer 1

Прежде всего, вы, вероятно, захотите сохранить контролируемые входы для своей формы, чтобы дать вам больше контроля над тем, что происходит в них, и для более легкого доступа к данным формы.

const [name, setName] = React.useState("");
  const [tweet, setTweet] = React.useState("");

  const handleChangeName = (e) => {
    setName(e.target.value);
  }

  const handleChangeTweet = (e) => {
    setTweet(e.target.value);
  }

...

<label htmlFor="name">Name</label> 
<input type="text" value={name} onChange={handleChangeName}/>
<label htmlFor="tweet">Tweet</label>
<input type="text" value={tweet} onChange={handleChangeTweet}/>

Затем вам нужно написать функцию-обработчик отправки, которая вызывается при отправке формы, внутри которой вы можете получить доступ к данным формы, которые вы отслеживали, и обновить массив пользователей:

const handleSubmit = (e) => {
    e.preventDefault();
    const newUser = { name, tweet };
    setUsers([...users, newUser])
  }

Я сделал пример здесь .

Answer 2

Вам нужно создать функцию handleSubmit ()

handleSubmit = event => {
    event.preventDefault();
    //logic to populate state as you want
}

И вызывать таким образом

<form onSubmit={handleSubmit}>