如何在反应中将子组件的状态数组传递给父组件？答案

【问题标题】：How do I get the state array of a child component to a parent component in react?如何在反应中将子组件的状态数组传递给父组件？
【发布时间】：2021-10-23 13:42:49
【问题描述】：

我在表单中有一个标签部分，我正在从另一个名为 <StackTag/> 的组件中呈现标签 div，我在该组件中有一个标签状态数组。在我的表单 onSubmit 中，我正在创建表单数据的对象。我无法从<StackTag> 访问标签数组并将标签推送到我的表单对象中。

 const [tags, setTags] = useState([]);
...
         <input
          type='text'
          onKeyDown={handleTag}
          onChange={handleTag}
          value={currentTagText}
          placeholder='Type your interests here'
        />
      </div>
      <div className={classes.stacktags}>
        {tags.map((tag, index) => {
          return (
            <div className={classes.stackInput} key={index}>
              {tag}
              <button
                onClick={() => removeTag(index)}
                className={classes.tagCloseBtn}
              >
                x
              </button>

在我的表单组件中，

  <div className={classes.interestDiv}>
      <label htmlFor='skills'>Skills</label>

      <StackTag />
    </div>

在我的控制台中，我可以看到<StackTag/> 的状态，我可以看到带有标签的数组，它正在工作，我尝试了不同的方法但我无法弄清楚，我正在使用 react-hook-form使用 const 获取表单数据

{ register, handleSubmit } = useForm();
  const [result, setResult] = useState('');
...
{...register('name')}

如何将标签添加到我的结果对象？

【问题讨论】：

您是否将 onSubmit 添加到表单组件中？
StackTag 的组件状态是“私有的”，因为其他 React 组件不能直接进入并访问它，这会破坏许多抽象。将回调道具传递给StackTag 以将其状态传递出去，或者将tags 状态移出到父组件并将tags 和回调作为道具传递。见Lifting State Up。
Yes onSubmit 在我的表单组件中，<StackTag/> 在表单中。

标签： javascript reactjs forms components react-forms

【解决方案1】：

您需要将状态 [tags, setTags] 移动到父组件。至于将道具传递给孩子，我可以想到两种选择：

选项 1：将 setTags 向下传递给孩子

const StackTag = ({ tags, setTags }) => {
  const [currentTagText, setCurrentTagText] = useState("");

  const handleTag = (e) => {
    if (e.keyCode === 13 && e.target.value) {
      setTags((tags) => [...tags, e.target.value]);
      setCurrentTagText("");
      e.preventDefault();
    }
  };

  const removeTag = (index) => {
    setTags((tags) => tags.filter((_, i) => i !== index));
  };

  return (
    <>
      <input
        type="text"
        onKeyDown={handleTag}
        onChange={(e) => {
          setCurrentTagText(e.target.value);
        }}
        value={currentTagText}
        placeholder="Type your interests here"
      />
      {tags.map((tag, index) => {
        return (
          <div key={index}>
            {tag}
            <button type="button" onClick={() => removeTag(index)}>x</button>
          </div>
        );
      })}
    </>
  );
};

export default function Form() {
  const [tags, setTags] = useState([]);

  return (
    <form
      onSubmit={(e) => {
        console.log("Submitting Form with tags:", tags);
        e.preventDefault();
      }}
    >
      <StackTag tags={tags} setTags={setTags} />
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

Live Demo 1

选项 2：传递 click 和 keydown 的处理程序：

const StackTag = ({ tags, onTagAdd, onTagRemove }) => {
  const [currentTagText, setCurrentTagText] = useState("");

  const handleTag = (e) => {
    if (e.keyCode === 13 && e.target.value) {
      onTagAdd(e.target.value);
      setCurrentTagText("");
      e.preventDefault();
    }
  };

  return (
    <>
      <input
        type="text"
        onKeyDown={handleTag}
        onChange={(e) => {
          setCurrentTagText(e.target.value);
        }}
        value={currentTagText}
        placeholder="Type your interests here"
      />
      {tags.map((tag, index) => {
        return (
          <div key={index}>
            {tag}
            <button type="button" onClick={() => onTagRemove(index)}>
              x
            </button>
          </div>
        );
      })}
    </>
  );
};

export default function Form() {
  const [tags, setTags] = useState([]);

  return (
    <form
      onSubmit={(e) => {
        console.log("Submitting Form with tags:", tags);
        e.preventDefault();
      }}
    >
      <StackTag
        tags={tags}
        onTagAdd={(tag) => {
          setTags((tags) => [...tags, tag]);
        }}
        onTagRemove={(tag) => {
          setTags(tags.filter((val) => val !== tag));
        }}
      />
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

Live Demo 2

【讨论】：