如何将输入条目添加到列表

Question

我正在使用 React 构建一个简历生成器项目，但我对如何将我在输入中输入的条目添加到列表（简历视图）感到有点困惑。 我最初创建了一个添加输入字段的函数，使其工作

 function addEducationField() {
setEducationData([
  ...educationData,
  {
    id: uuidv4(),
    schoolName: '',
    title: '',
    location: '',
    startDate: '',
    endDate: '',
  },
]);

} 将其作为另一个组件的 prop 传递，并映射它：

{educationData.map((edu, index) => (
    <div key={index} className="mb-4">
      <input
        type="text"
        name="schoolName"
        placeholder="School"
        value={edu.schoolName}
        onChange={(e) => handleEducationChange(index, e)}
        className="mb-2 block w-full rounded border p-2"
      />

我不太满意，因为我希望在提交条目时重置输入，这样我就可以重新开始（这里它不断创建输入）。

handleChange 和 addField 函数位于 App.tsx 中，将两者作为 props 传递给我需要的组件。

为了实现我想做的事情，我不确定是否在本地管理状态。我试图像处理待办事项列表一样处理它，但没有成功。

我想了解如何做到这一点，所以即使你必须指导我一些文档也会很好，非常感谢你，希望效果更好。

Answer 1

您的问题并不完全清楚，但我假设您在此模式中使用

React.useState

：

const [educationData, setEducationData] = useState([])

如果您想在提交时清除这些输入的值，您可以按照以下方式执行操作..

function handleSubmit(){
...all the stuff you do in the submit...
setEducationData((prevData)=>{
  return prevData.map(x => {
    id:x.id,
    schoolName: '',
    title: '',
    location: '',
    startDate: '',
    endDate: '',
    })
  })
}

React.useState

的状态设置器可以采用单个值参数，也可以采用将提供当前状态的函数作为其参数。  所以上面的代码所做的就是循环遍历 

educationData

 的所有值，向前推进 id，但所有其他属性都被设置为空字符串。  通过返回 

prevData.map

 的结果，它将状态设置为这个新数组。