React - 如何从表单中提取值并更新我的状态？

Question

我正在学习 React，但遇到了这个问题。

我在 App.js 上为具有两个属性 name 和 tweet 的用户创建了一个状态component 和 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

您需要创建一个 handleSubmit() 函数

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

并以这种方式调用

<form onSubmit={handleSubmit}>

Answer 2

首先，您可能希望为表单维护 controlled inputs，以便更好地控制其中发生的事情并更轻松地访问表单数据。

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

我做了一个例子here。

React - 如何从表单中提取值并更新我的状态？

React - How can i extract values from a form and update my state?

reactjs

react-state-management