0

我创建了一个输入，当您编写内容并单击按钮时，值会添加到我们的状态中，现在我正在尝试从状态中更新选择选项，如下所示：

const NewGroup = () => {
  const [group, setGroup] = useState([]);
  const addToGroup = (e) => {
    const newGroup = group;
    newGroup.push(e.target.previousElementSibling.value);
    setGroup(newGroup);
  };
  return (
    <div>
      <input type="text" name="" id="" />
      <button onClick={addToGroup}>submit</button>
      <div>
        <select name="" id="">
          {group.map((category) => {
            return <option value=''>{category}</option>;
          })}
        </select>
      </div>
    </div>
  );
};
export default NewGroup;

但什么也没发生。

4

2 回答 2

0

首先，您不应该通过直接使用 DOM 来获取输入的值，而应该使用 Ref.

其次，问题是您直接改变组值而不是复制它。当你调用 setGroup 时，React 并没有意识到有任何变化（因为之前的值等于当前值）。相反，您想复制数组并添加新元素：

// Previously: const newGroup = group;
const newGroup = [...group];

这应该是让您的代码正常工作所要做的一切。但是，我使用下面的内联注释对其进行了简化和清理。

const NewGroup = () => {
    // Here's where our input will be stored so we can use it later (instead of querying the dom directly)
    const inputRef = React.useRef();
    const [group, setGroup] = React.useState([]);
    // Use React.useCallback so the function doesn't change on every render
    const addToGroup = React.useCallback((e) => {
        // We call setGroup with a function that returns the new group value. The first argument is the current group value. We return a new array by spreading the existing value and adding our new value
        setGroup((v) => [...v, inputRef.current.value]);
    }, []);
    return (
        <div>
            <input type="text" ref={inputRef} name="" id="" />
            <button onClick={addToGroup}>submit</button>
            <div>
                <select name="" id="">
                    {group.map((category) => {
                        return (
                            <option value="" key={category}>
                                {category}
                            </option>
                        );
                    })}
                </select>
            </div>
        </div>
    );
};
于 2022-03-01T19:46:27.227 回答
0

您可以引入另一个useState()用于写入<input>元素。当按下提交按钮时，您只需将 推someText送到group数组。

const NewGroup = () => {
  const [group, setGroup] = useState([]);
  const [someText, setSomeText] = useState("");
  const addToGroup = (e) => {
    // Takes up all the present elements(of array group) and adds new element (search)
    let temp = [...group, someText];
    setGroup(temp);
  };
  return (
    <div>
      <input type="text" name="" id="" value={someText} onChange={(e) => { setSomeText(e.target.value); }} />
      <button onClick={addToGroup}>submit</button>
      <div>
        <select name="" id="">
          {group.map((category, index) => {
            return (
              <option key={index} value="">
                {category}
              </option>
            );
          })}
        </select>
      </div>
    </div>
  );
}

export default NewGroup;

这是工作应用程序的链接https://codesandbox.io/s/boring-ptolemy-0cwzmi?file=/src/App.js

于 2022-03-01T19:49:32.933 回答