javascript 如何在React中将几个onChange函数重构为一个

qyuhtwio  于 2023-05-05  发布在  Java
关注(0)|答案(5)|浏览(137)

我在组件中有几个输入,每个输入都有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)}
        />
n9vozmp4

n9vozmp41#

你可以创建一个函数,并将你想要更改的属性的名称作为参数传递:

const handleInputChange = (event: any, id: string, propertyName: string) => {
  const newItems: any = [...items]
  const item: any = newItems.find((item:any) => item.id === id);
  item[propertyName] = event.target.value;
  setItems(newItems);
}
mqxuamgl

mqxuamgl2#

您可以创建一个动态onChange函数,该函数使用inputname在一个对象上设置它的value,在该对象上保存所有输入值

const { useState } = React;

const Example = () => {

    const onChange = (event) => {
        setValues({
            ...allValues,
            [event.target.name]: event.target.value
        });
    }

    const [allValues, setValues] = useState({
        name: '',
        description: ''
    });

    return (
        <div>
            <h1>{'Example'}</h1>
            <input 
                type='text' 
                name="name" 
                className='item-info-text' 
                placeholder='Nazwa przedmniotu' 
                maxLength={255} 
                value={allValues['name']} 
                onChange={onChange}
              />
              <input 
                type='text' 
                name="description" 
                className='item-info-text' 
                placeholder='Opis przedmniotu' 
                maxLength={255} 
                value={allValues['description']} 
                onChange={onChange}
              />
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
juud5qan

juud5qan3#

通过在项目中添加[ www.example.com ]解决了此问题event.target.name:

item[event.target.name] = event.target.value;
pgccezyw

pgccezyw4#

我认为您可以简单地创建一个onChange处理程序,在其中可以动态地设置值

const onChangeHandler=(event)=>{
    items[event.target.name] = event.target.value;
}

它将在items数组中存储所有字段值

oipij1gg

oipij1gg5#

Witam!为了简化代码并避免为每个输入编写多个类似的函数,您可以创建一个单独的函数,该函数接受一个附加参数来确定应更新项的哪个属性。即:

const changeItemProperty = (event: any, id: string, property: string) => {
  const newItems: any = [...items];
  const item: any = newItems.find((item: any) => item.id === id);
  item[property] = event.target.value;
  setItems(newItems);
};

此函数接受一个额外的property参数,该参数指定应更新项的哪个属性。现在,您可以通过传递相应的属性名称来对两个输入使用此单个函数:

<input
  type="text"
  name="name"
  className="item-info-text"
  placeholder="Nazwa przedmniotu"
  maxLength={255}
  value={item.name}
  onChange={(e) => changeItemProperty(e, item.id, "name")}
/>
<input
  type="text"
  name="description"
  className="item-info-text"
  placeholder="Opis przedmniotu"
  maxLength={255}
  value={item.description}
  onChange={(e) => changeItemProperty(e, item.id, "description")}
/>

使用这种方法,只需将适当的属性名传递给changeItemProperty函数,就可以轻松地用同一个函数处理多个输入。这将使您的代码更简洁,更易于维护。

相关问题