我如何更新react.js中状态的选择选项

Question

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

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;

但什么也没发生。

Answer 1

您可以引入另一个 useState() 来写入 元素。当按下“提交”按钮时，您只需将 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

Answer 2

首先，您不应该直接使用 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>
    );
};