React技术问询：如何通过表单提交提取值并更新状态添加新用户

嘿，我来帮你搞定这个需求！要实现表单提交后把新的用户推文添加到状态里并渲染出来，咱们只需要做几个关键调整，我一步步给你拆解：

步骤1：为输入框添加状态绑定 #

首先，我们需要用useState来跟踪输入框里的内容，这样才能拿到用户输入的名字和推文内容。在App组件里新增两个状态变量：

const [nameInput, setNameInput] = useState('');
const [tweetInput, setTweetInput] = useState('');

然后把这两个状态绑定到对应的input标签上，通过value属性关联状态，onChange事件更新状态：

<input 
  type="text" 
  id="name" 
  value={nameInput} 
  onChange={(e) => setNameInput(e.target.value)} 
/>
<input 
  type="text" 
  id="tweet" 
  value={tweetInput} 
  onChange={(e) => setTweetInput(e.target.value)} 
/>

步骤2：处理表单提交事件 #

接下来给表单添加onSubmit事件处理函数，在函数里要做这几件事：

• 阻止表单默认的刷新行为
• 创建新的用户对象（别忘了给likes加个初始值，比如0，避免Tweet组件里显示undefined）
• 更新users状态：永远不要直接修改原状态数组，要通过展开原数组的方式添加新元素
• 清空输入框的内容

修改后的表单代码加上提交处理：

<form onSubmit={(e) => handleSubmit(e)}>

然后在App组件里定义handleSubmit函数：

const handleSubmit = (e) => {
  e.preventDefault();
  // 加个简单的非空校验，避免提交空内容
  if (!nameInput.trim() || !tweetInput.trim()) return;
  // 创建新用户对象
  const newUser = {
    name: nameInput,
    tweet: tweetInput,
    likes: 0
  };
  // 更新状态，展开原数组+新对象
  setUsers([...users, newUser]);
  // 清空输入框
  setNameInput('');
  setTweetInput('');
};

步骤3：完善Tweet组件的默认值 #

看到你的Tweet组件里用到了likes属性，但原状态里的用户都没有这个属性，渲染的时候会显示Likes: undefined。可以给Tweet组件的props加个默认值，这样即使没传likes也能正常显示：

修改Tweet.js的函数参数：

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

完整修改后的代码 #

App.js #

import React, {useState} from 'react';
import Tweet from './Tweet';
function App () {
 const [users, setUsers] = useState([
 {name:'Coulson', tweet:'Avengers Assemble', likes: 0},
 {name:'Rick', tweet:'Living in world of dead.', likes: 0},
 {name:'Barry', tweet:'I am the Flash.', likes: 0},
 {name:'Judith', tweet:'Hi Carl.', likes: 0},
 {name:'Michonne', tweet:'I have a katana.', likes: 0},
 {name:'Bob', tweet:'Lets build something.', likes: 0},
 ]);
 const [nameInput, setNameInput] = useState('');
 const [tweetInput, setTweetInput] = useState('');

 const handleSubmit = (e) => {
  e.preventDefault();
  if (!nameInput.trim() || !tweetInput.trim()) return;
  const newUser = {
    name: nameInput,
    tweet: tweetInput,
    likes: 0
  };
  setUsers([...users, newUser]);
  setNameInput('');
  setTweetInput('');
 };

 return(
 <div className="App">
 <div className="form">
 <form onSubmit={handleSubmit}>
 <label htmlFor="name">Name</label>
 <input 
  type="text" 
  id="name" 
  value={nameInput} 
  onChange={(e) => setNameInput(e.target.value)} 
 />
 <label htmlFor="tweet">Tweet</label>
 <input 
  type="text" 
  id="tweet" 
  value={tweetInput} 
  onChange={(e) => setTweetInput(e.target.value)} 
 />
 <button type="submit">Submit</button>
 </form>
 </div>
 {users.map((user, index) => (
 <Tweet key={index} name={user.name} tweet={user.tweet} likes={user.likes} />
 ))}
 </div>
 )
}
export default App;

Tweet.js #

import React from 'react'
import "./App.css"
function Tweet ({name, tweet, likes = 0}) {
 return(
 <div className="tweet">
 <h3>{name}</h3>
 <p>{tweet}</p>
 <h3>Likes: {likes}</h3>
 </div>
 )
}
export default Tweet;

另外提个小细节：在map渲染组件的时候，最好给每个Tweet加上唯一的key属性，这里我用了index作为临时key，如果以后有用户id的话，用id会更规范。

内容的提问来源于stack exchange，提问作者Amit Negi