onChangeHandler :: 如何操作相同的输入表单

Question

我正在使用 React 实现“重复的英文单词形式”，但我不知道如何处理在 onChangeInputHandler 变量中包含多个对象的 wordList。

当WordList 与onClickCardAddHandler 一起单击时，对象inputData 将被添加，我想使用从@ 的onChange 接收到的索引与onChange 分开调整输入表单987654328@组件。

这是我的代码：

// AddWords.jsx(Parent component)

export default function AddWords() {
  const [wordList, setWordList] = useState([
    {
      spelling: "wordlist",
      meaning: "",
      category: "",
    },
  ]);
 

  const { spelling, meaning, category } = wordList;

  const inputData = {
    spelling: "",
    meaning: "",
    category: "",
  };

  const onChangeInputHandler = (e, index) => {
    const { value, name } = e.target;
    setWordList({
      ...wordList,
      [name]: value,
    });
  };

  const onClickCardAddHandler = () => {
    let WordInputs = [...wordList];
    let nextWordInputs = inputData;
    WordInputs.push(nextWordInputs);
    setWordList(WordInputs);
  };

  return (
    <Container>
      <AddWordsForm
        inputs={inputs}
        wordList={wordList}
        setWordList={setWordList}
        onChangeInputHandler={onChangeInputHandler}
      />
      <CardAddContainer onClick={onClickCardAddHandler}>
        <AddIcon /> add Card
      </CardAddContainer>
    </Container>
  );
}

//AddWordsForm.jsx 

import React, { useState } from "react";
import Input from "@mui/material/Input";
import styled from "styled-components";
import NativeSelect from "@mui/material/NativeSelect";
export default function AddWordsForm({
  wordList,
  onChangeInputHandler,
}) {
  const { spelling, meaning, category } = wordList;
  const categoryList = ["n", "v", "adj", "adv", "phr", "prep"];

  return (
    <>
      {wordList &&
        wordList.map((item, index) => (
          <CardContainer key={index}>
            <div>
              <div>
                <label>단어</label>
                <Input
                  name="spelling"
                  value={spelling}
                  onChange={(e) => onChangeInputHandler(e, index)}
                />
              </div>
              <div>
                <label>뜻</label>
                <Input
                  name="meaning"
                  value={meaning}
                  onChange={(e) => onChangeInputHandler(e, index)}
                />
              </div>
              <div>
                <label>품사</label>
                <NativeSelect
                  name="category"
                  value={category}
                  onChange={(e) => onChangeInputHandler(e, index)}
                >
                  {categoryList.map((category, index) => (
                    <option key={index} value={category}>
                      {category}
                    </option>
                  ))}
                </NativeSelect>
              </div>
            </div>
          </CardContainer>
        ))}
    </>
  );
}
const CardContainer = styled.div`
  background-color: lightgray;
  padding: 2vh;
  margin: 2vh;
  width: 35vh;
  border-radius: 1.5vh;
`;

Answer 1

检查您当前的状态，可以为您提供线索

  const onChangeInputHandler = (e, index) => {
    const { value, name } = e.target;

    setWordList( wordList.map( (item, i) => {
       if(i === index)
         return {...item, ...{[name]:value}}
       else
         return item

    }));
  };