通过数组映射时反应设置特定的输入形式

Question

所以我从 api 中获取了一堆学生数据并通过它进行映射，按照常见的反应实践在 div 中显示学生信息。我想添加一个文本输入字段，以便能够将 tags/comments 添加到学生的每个实例。代码看起来像这样

              <form onSubmit={(e) => handleSubmit(e, i)}>
                <input
                  type='text'
                  placeholder='Add a tag'
                  className='tag__input'
                  value={tag}
                  onChange={(e) => setTag(e.target.value)}
                />
              </form>

const [tag, setTag] 只是一个 useState，保存我要添加的评论的字符串值。预计这不会像我需要的那样工作，因为我所有输入字段的值都在变化，而我只需要根据我需要为哪个学生发表评论来更改一个特定的字段。设置此逻辑的下一步是什么？谢谢！

Answer 1

您应该为学生信息和输入创建单独的组件，并将 useState 放入该组件中。

现在所有字段都有 1 个状态。

UPD，类似于

        function StudentEntry({ data, onSubmit }) {
          // one state per entry
          const [tag, setTag] = React.useState('')
 
          return (<>
            <StudentInfo {...data} />

            <form onSubmit={(e) => onSubmit(e, data.id)}>
            <input
              type='text'
              placeholder='Add a tag'
              className='tag__input'
              value={tag}
              onChange={(e) => setTag(e.target.value)}
            />
            </form>
         </>
         }

         // and use somewhere
         {studentsData.map(data => 
            <StudentEntry data={data} key={data.id} onSubmit={handleSubmit} />
         )}

通过数组映射时反应设置特定的输入形式

React setting specific input forms when mapping through array

input

reactjs

react-hooks

use-state