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

Question

我创建了一个输入，当你写东西并点击按钮时，值会添加到我们的状态，现在我正在尝试从这样的状态更新 select 选项：

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

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

Answer 2

您可以引入另一个 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;

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

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

How can i update select option from state in react.js

javascript

arrays

state

reactjs

select-options