我在组件中有几个输入,每个输入都有onChange来更改它们的值。我怎样才能简化这段代码,这样我就不会写x个类似的函数?如果item将有6个输入,所以我将不得不复制这个函数6次,只改变其中的一个单词(item.x),这看起来毫无意义,但我不知道如何使它更好。
onChange函数:
const changeItemName = (event: any, id: string ) => {
const newItems: any = [...items]
const item: any = newItems.find((item:any) => item.id === id);
item.name = event.target.value;
setItems(newItems);
}
const changeItemDescription = (event: any, id: string ) => {
const newItems: any = [...items]
const item: any = newItems.find((item:any) => item.id === id);
item.description = event.target.value;
setItems(newItems);
}
输入:
<input
type='text'
name="name"
className='item-info-text'
placeholder='Nazwa przedmniotu'
maxLength={255}
value={item.name}
onChange={(e) => changeItemName(e, item.id)}
/>
<input
type='text'
name="description"
className='item-info-text'
placeholder='Opis przedmniotu'
maxLength={255}
value={item.description}
onChange={(e) => changeItemDescription(e, item.id)}
/>
5条答案
按热度按时间n9vozmp41#
你可以创建一个函数,并将你想要更改的属性的名称作为参数传递:
mqxuamgl2#
您可以创建一个动态
onChange
函数,该函数使用input
的name
在一个对象上设置它的value
,在该对象上保存所有输入值juud5qan3#
通过在项目中添加[ www.example.com ]解决了此问题event.target.name:
pgccezyw4#
我认为您可以简单地创建一个onChange处理程序,在其中可以动态地设置值
它将在items数组中存储所有字段值
oipij1gg5#
Witam!为了简化代码并避免为每个输入编写多个类似的函数,您可以创建一个单独的函数,该函数接受一个附加参数来确定应更新项的哪个属性。即:
此函数接受一个额外的
property
参数,该参数指定应更新项的哪个属性。现在,您可以通过传递相应的属性名称来对两个输入使用此单个函数:使用这种方法,只需将适当的属性名传递给
changeItemProperty
函数,就可以轻松地用同一个函数处理多个输入。这将使您的代码更简洁,更易于维护。