Создание обобщенной функции onChange() для разных входных данных без использования тега имени
Я пытаюсь создать обобщенную функцию handleChangeEvent() для всех моих полей ввода. У меня есть более 30 полей ввода, поэтому на самом деле нет возможности иметь один метод handleChangeEvent для каждого ввода, так как это создаст тонны стандартного кода. В приведенном ниже примере я попытался создать функцию, которая будет обрабатывать любой ввод.
Для моего проекта я использую дизайн Ant, который, похоже, не поддерживает атрибут имени внутри своих элементов формы (например, InputNumber/Input и т. д.).
Пример поля InputNumber:
<InputNumber name='myNumber' min = {1} max = {100000} placeholder='Enter number' value = {this.state.myNumber} onChange = {handleChangeEvent}/>
Это моя попытка написать обобщенный метод onChange. Но он передает эту ошибку: Не удается прочитать имя свойства неопределенного
handleChangeEvent = (e) => {
this.setState({
[e.target.name]: e.target.value
});
Этот метод позволит мне получить доступ к любому выбранному элементу ввода и обновить его. Однако это работает из-за отсутствия атрибута имени.
Как предлагается ниже, этот подход работает, но по-прежнему оставляет меня без обобщенного решения — способа обработки любого ввода и сопоставления с правильным значением состояния.
state = {
myNumber: 0,
myNumber2: 0,
myNumber3: 0
};
handleChangeEvent = e => {
this.setState({
myNumber: e
});
};
В приведенном ниже примере функция handleChangeEvent будет обновлять только myNumber, но не myNumber2 и myNumber3.
<InputNumber name='myNumber' min = {1} max = {100000} placeholder='Enter number' value = {this.state.myNumber} onChange = {handleChangeEvent}/>
<InputNumber name='myNumber2' min = {1} max = {100000} placeholder='Enter number' value = {this.state.myNumber2} onChange = {handleChangeEvent}/>
<InputNumber name='myNumber3' min = {1} max = {100000} placeholder='Enter number' value = {this.state.myNumber3} onChange = {handleChangeEvent}/>
Любые предложения по обходному пути?
Ваш вопрос слишком заморочен, что значит "обобщенный метод onChange"? Как вы оцениваете поведение своего компонента? Проверьте мой ответ, хотя я думаю, вам следует подробнее остановиться на конкретных примерах.
Более того, «мое единственное предлагаемое решение - перестроить мой проект с использованием Material-UI» - очень плохое предложение, рефакторинг проекта, потому что «недостаток знаний» - это плохой совет.
Спасибо за содержательный комментарий! Я попытался указать свою проблему дальше в исходном сообщении.
ПОКАЖИТЕ пример использования, попробуйте прочитать свой вопрос, как вы думаете, люди могут понять, чего вы пытаетесь достичь?
Я впервые использую переполнение стека, я не привык так описывать свои проблемы. Я еще раз пройдусь по своему сообщению.
Отлично, теперь ясно
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Согласно InputNumber API, onChange принимает Number|String, e.target.value всегда устраняет ошибку времени выполнения.
onChange: The callback triggered when the value is changed - function(value: number | string)
Вот пример, где я полагаю в письменной форме:
<InputNumber name='myNumber' min = {1} max = {100000} placeholder='Enter number' value = {this.state.myNumber} onChange = {handleChangeEvent}/>
Вы имели в виду использование компонента класса, потому что onChange = {handleChangeEvent}, как вы описали, должен быть частью класса.
export default class App extends React.Component {
state = {
myNumber: 0
};
handleChangeEvent = e => {
this.setState({
myNumber: e
});
};
render() {
return (
<FlexBox>
<InputNumber
name = "myNumber"
min = {1}
max = {100000}
placeholder = "Enter number"
value = {this.state.myNumber}
onChange = {this.handleChangeEvent}
/>
</FlexBox>
);
}
}
- Если вы хотите использовать общий метод
handleChangeEvent, вы должны изменить тип компонента сInputNumberнаInput, потому что вы хотите получить доступ к свойствуname = "myNumber".
handleChangeEvent = e => {
e.persist();
this.setState({
[e.target.name]: e.target.value
});
};
- Лучший подход продолжает использовать
InputNumberи реализоватьhandleChangeEventкак каррированную функцию:
handleChangeEvent = name => e => {
this.setState({
[name]: e
});
};
Проверьте пример обоих подходов:
class AppInputNumber extends React.Component {
state = {
myNumber: 0,
myNumber2: 0,
myNumber3: 0
};
handleChangeEvent = name => e => {
this.setState({
[name]: e
});
};
render() {
return (
<FlexBox>
<InputNumber
min = {1}
max = {100000}
placeholder = "Enter number"
value = {this.state.myNumber}
onChange = {this.handleChangeEvent('myNumber')}
/>
<InputNumber
min = {1}
max = {100000}
placeholder = "Enter number"
value = {this.state.myNumber2}
onChange = {this.handleChangeEvent('myNumber2')}
/>
<InputNumber
min = {1}
max = {100000}
placeholder = "Enter number"
value = {this.state.myNumber3}
onChange = {this.handleChangeEvent('myNumber3')}
/>
</FlexBox>
);
}
}
export default class App extends React.Component {
state = {
myNumber: 0,
myNumber2: 0,
myNumber3: 0
};
handleChangeEvent = e => {
e.persist();
this.setState({
[e.target.name]: e.target.value
});
};
render() {
return (
<FlexBox>
<Input
name = "myNumber"
min = {1}
max = {100000}
type = "number"
placeholder = "Enter number"
value = {this.state.myNumber}
onChange = {this.handleChangeEvent}
/>
<Input
name = "myNumber2"
min = {1}
max = {100000}
type = "number"
placeholder = "Enter number"
value = {this.state.myNumber2}
onChange = {this.handleChangeEvent}
/>
<Input
name = "myNumber3"
min = {1}
max = {100000}
type = "number"
placeholder = "Enter number"
value = {this.state.myNumber3}
onChange = {this.handleChangeEvent}
/>
<AppInputNumber />
</FlexBox>
);
}
}
Спасибо за ответ! Это позволяет мне достичь значения, но моя цель — создать обобщенный метод handleChangeEvent. Как бы вы предложили мне сделать это с помощью этого метода?
Что значит обобщенный метод? Отредактируйте свой вопрос и добавьте пример использования, ожидаемое поведение и т. д.
Спасибо за ответ Денис! Я попытался обновить свой оригинальный пост, чтобы быть более конкретным.
Ответ обновлен, если он был полезен, примите ответ и проголосуйте. Кроме того, пожалуйста, возьмите Тур и прочитайте Как задать хороший вопрос для своего следующего поста ;-) Получайте удовольствие.
Деннис Вэш, ты легенда. Это сработало отлично, спасибо! Извините, но у меня всего 6 репутации, поэтому мой апвоут не визуализируется, а записывается.
Я не уверен, но если e является объектом события, попробуйте это
e.target.getAttribute('name')
На данный момент единственное предлагаемое мной решение — перестроить мой проект с помощью Material-UI. Я протестировал эту функцию в проекте с использованием Material UI, и она сработала, потому что они поддерживают атрибут «имя». Я предпочитаю дизайн Ant Design, поэтому я все равно был бы признателен за обходной путь, если это возможно.