如何使用React将输入值追加为HTML元素？Hook表单场景求助

我来帮你搞定这个问题！你现在的核心需求是把表单提交的数据传递给DisplayList组件，并且把这些数据渲染成可展示的HTML元素，对吧？咱们一步步来调整代码：

1. 新增状态存储已提交的数据 #

首先在AddList组件里，我们需要一个状态来保存所有提交过的表单数据，这样才能把它们传递给展示组件。用useState来创建这个状态：

import { useState } from 'react'; // 别忘了导入useState

const AddList = () => {
  // 新增状态：存储所有已提交的表单项
  const [submittedItems, setSubmittedItems] = useState([]);
  
  // ... 其他代码
};

2. 修改提交函数，把数据存入状态 #

接下来修改onSubmitForm函数，当表单提交时，把当前输入的inputs对象添加到submittedItems数组里：

const onSubmitForm = () => {
  console.log(` First name: ${inputs.firstName} Last name: ${inputs.lastName}`);
  // 用展开运算符保留之前的项，添加新的输入项
  setSubmittedItems(prevItems => [...prevItems, inputs]);
};

3. 把已提交数据传递给DisplayList组件 #

之前你调用<DisplayList />的时候没有传递inputs props，现在把我们的submittedItems传过去：

// 在AddList的return里修改这一行
<DisplayList inputs={submittedItems} />

4. 调整DisplayList组件，渲染HTML元素 #

现在DisplayList拿到的是一个数组，我们需要遍历数组，把每个项渲染成具体的HTML元素（比如列表项）。同时处理空数据的情况，给用户友好提示：

const DisplayList = ({ inputs }) => (
  <div>
    <h3>page 2 (parent component)</h3>
    <div>
      {inputs.length === 0 ? (
        <p>还没有提交任何数据哦～</p>
      ) : (
        <ul>
          {inputs.map((item, index) => (
            <li key={index}>
              <strong>First Name:</strong> {item.firstName}, <strong>Last Name:</strong> {item.lastName}
            </li>
          ))}
        </ul>
      )}
    </div>
  </div>
);

注意：这里用index作为key是临时方案，如果你的数据有唯一ID（比如后端返回的id），最好用那个作为key，性能会更好。

完整修改后的代码 #

整合所有修改后的完整代码如下：

import { useState } from 'react';

const DisplayList = ({ inputs }) => (
  <div>
    <h3>page 2 (parent component)</h3>
    <div>
      {inputs.length === 0 ? (
        <p>还没有提交任何数据哦～</p>
      ) : (
        <ul>
          {inputs.map((item, index) => (
            <li key={index}>
              <strong>First Name:</strong> {item.firstName}, <strong>Last Name:</strong> {item.lastName}
            </li>
          ))}
        </ul>
      )}
    </div>
  </div>
);

const AddList = () => {
  const [submittedItems, setSubmittedItems] = useState([]);

  const onSubmitForm = () => {
    console.log(` First name: ${inputs.firstName} Last name: ${inputs.lastName}`);
    setSubmittedItems(prevItems => [...prevItems, inputs]);
  };

  const { inputs, handleInputChange, handleSubmit } = InputForm(onSubmitForm);

  return (
    <div>
      <h3>page 1 (child component)</h3>
      <form onSubmit={handleSubmit}>
        <label>First Name: </label>
        <input type="text" name="firstName" onChange={handleInputChange} value={inputs.firstName || ""} required />
        <label>Last Name: </label>
        <input type="text" name="lastName" onChange={handleInputChange} value={inputs.lastName || ""} required />
        <button type="submit">Submit</button>
      </form>
      <hr />
      <DisplayList inputs={submittedItems} />
    </div>
  );
};

export default AddList;

这样修改后，你每次提交表单，数据就会被添加到列表里，并且在DisplayList组件中以HTML列表的形式展示出来啦！

内容的提问来源于stack exchange，提问作者Mohammed Asker