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

【问题标题】：React - How can i extract values from a form and update my state?React - 我如何从表单中提取值并更新我的状态？
【发布时间】：2019-10-30 15:38:03
【问题描述】：

我正在学习 react 并遇到了这个问题。

我在我的 App.js 组件 和 Tweet.js 上为具有两个属性 name 和 tweet 的用户创建了一个状态 组件从状态中获取数据并在 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;

【问题讨论】：

标签： reactjs react-state-management

【解决方案1】：

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

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

然后这样调用

<form onSubmit={handleSubmit}>

【讨论】：

【解决方案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。

【讨论】：