0

我在表单中有一个标签部分，我正在从另一个名为的组件渲染标签 div <StackTag/>，我在该组件中有一个标签状态数组。在我的表单 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 来获取表单数据常量

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

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

4

1 回答 1

0

您需要将状态移动[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>
  );
}

现场演示 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>
  );
}

现场演示 2

于 2021-08-23T11:04:31.190 回答