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

Posted 2023-02-18

【中文标题】如何在反应中将子组件的状态数组传递给父组件？

【英文标题】：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/> 在表单中。

【参考方案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