javascript - 如何通过单击 react 中的更新按钮来更新下拉列表

Question

我想在输入字段中提供一些文本，单击更新按钮后，它应该在下拉列表中更新，但它不起作用

import React from "react";
export default function DropDown() {
  const [input, setInput] = React.useState('');
  const selectproject=({e})=>{
    setInput(e.target.value);
  }
return (
    <>
    <select>
     <option>{input?input:'null'}</option>
    </select>
    <br/><br/>
      <input value={input} /><button onClick={selectproject}>Update</button>
    </>
  );
}

Answer 1

删除 selectproject 上的花括号 Prop 。

selectproject=(e)=>{
    setInput(e.target.value);
  }

你正在解构 e在 <Event>这是不可用的。如果你想解构它，试试这个

selectproject=({target: {value}})=>{
     setInput(value);
   }

如果您希望在单击按钮后更新下拉列表，则需要另一个状态

import React from "react";
export default function DropDown() {
  const [input, setInput] = React.useState("");
  const [project, setProject] = React.useState("");
  const selectproject = () => {
    setProject(input);
  };
  const handleOnChange = (e) => {
    setInput(e.value.target);
  };
  return (
    <>
      <select>
        <option>{project ? project : "null"}</option>
      </select>
      <br />
      <br />
      <input value={input} onChange={handleOnChange} />
      <button onClick={selectproject}>Update</button>
    </>
  );
}