如何通过单击"更新"按钮来更新下拉列表 反应.

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道具上的大括号。

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

您正在解构不可用的<Event>e。 如果要解构它，请尝试此操作

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>
</>
);
}

Answer 2

需要去掉 e 周围的大括号并设置 onchange 到输入：

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} onChange={selectproject} />
<button onClick= {selectproject}>Update</button>
</>
);
}

Answer 3

您可以从两个使用状态使用：

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