如何创建一个函数，该函数将函数作为其参数之一进行反应

Question

我正试图创建一个函数，该函数将一个函数(在本例中为react hook useState函数(作为其参数之一，以简化以下代码(我只显示了2列，我的实际数据大约有30列，因此我试图简化(

const [teamName, setTeamName] = useState('')
const [teamLocation, setTeamLocation] = useState('')
<div classname="editHere">
<input value={teamName} onChange={(e) => {  setTeamName(e.target.value) }}/>
</div>
<div className="editHere">
<input value={teamLocation} onChange={(e) => {  setTeamLocation(e.target.value) }}/>
</div>

我正在尝试使用以下功能

function dropDownRow(value, setValue()) {
return (
<div className="editHere">
<input value={value} onChange={(e) => {  setValue(e.target.value) }}/>
</div>
)
}

然后返回第一个片段中显示的内容，我想键入

{dropDownRow(teamName, setTeamName())}
{dropDownRow(teamLocation, setTeamLocation())}

显然这不起作用，所以有人对我如何实现我想要实现的目标有什么建议吗？

Answer 1

创建这样的函数。。。

function DropDownRow({ value, setValue }) {
return (
<div className="editHere">
<input value={value} onChange={e => setValue(e.target.value)} />
</div>
);
}

你的推荐人应该喜欢。。。

<DropDownRow value={teamName} setValue={setTeamName} />
<DropDownRow value={teamLocation} setValue={setTeamLocation} />

此处示例。。。

Answer 2

删除此处的括号：

function dropDownRow(value, setValue) {

这里：

{dropDownRow(teamName, setTeamName)}
{dropDownRow(teamLocation, setTeamLocation)}

或者你也可以使用更干净的语法：

const DropDownRow = ({ value, setValue }) => ...

然后

<DropDownRow value={teamName} setValue={setTeamName} />
<DropDownRow value={teamLocation} setValue={setTeamLocation} />