Что такое правильный тип для события реагирует. Изначально я просто использовал любой
для простоты. Теперь, я пытаюсь навести порядок и избежать использования абсолютно любым.
Таким образом, в простой такой форме:
export interface LoginProps {
login: {
[k: string]: string | Function
uname: string
passw: string
logIn: Function
}
}
@inject('login') @observer
export class Login extends Component<LoginProps, {}> {
update = (e: React.SyntheticEvent<EventTarget>): void => {
this.props.login[e.target.name] = e.target.value
}
submit = (e: any): void => {
this.props.login.logIn()
e.preventDefault()
}
render() {
const { uname, passw } = this.props.login
return (
<div id='login' >
<form>
<input
placeholder='Username'
type="text"
name='uname'
value={uname}
onChange={this.update}
/>
<input
placeholder='Password'
type="password"
name='passw'
value={passw}
onChange={this.update}
/>
<button type="submit" onClick={this.submit} >
Submit
</button>
</form>
</div>
)
}
}
Какой тип я должен использовать здесь как тип события?
Реагировать.SyntheticEvent<eventtarget из>
вроде бы не работает, как я получаю сообщение об ошибке, что " имя " и "значение" не существует "целевой".
Более обобщенный ответ для всех событий будет действительно оценили.
Спасибо
В SyntheticEvent интерфейс универсальный:
interface SyntheticEvent<T> {
...
currentTarget: EventTarget & T;
...
}
И currentTarget-это пересечение универсального ограничения и устройство eventtarget. Кроме того, поскольку события, вызванные входной элемент, вы должны использовать
FormEvent` (в файл определения, документы реагируете).
Должно быть:
update = (e: React.FormEvent<HTMLInputElement>): void => {
this.props.login[e.currentTarget.name] = e.currentTarget.value
}
Проблема не с типом события, но то, что интерфейс eventtarget в машинопись имеет только 3 способами:
interface EventTarget {
addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
dispatchEvent(evt: Event): boolean;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}
interface SyntheticEvent {
bubbles: boolean;
cancelable: boolean;
currentTarget: EventTarget;
defaultPrevented: boolean;
eventPhase: number;
isTrusted: boolean;
nativeEvent: Event;
preventDefault(): void;
stopPropagation(): void;
target: EventTarget;
timeStamp: Date;
type: string;
}
Так что правильно, что имя
и value
Дон'т существуют на устройство eventtarget. Что вам нужно сделать, это бросить цель для конкретного типа элемента со свойствами нужно. В этом случае это будет HTMLInputElement
.
update = (e: React.SyntheticEvent): void => {
let target = e.target as HTMLInputElement;
this.props.login[target.name] = target.value;
}
Также для события, а не реагировать.SyntheticEvent, вы также можете ввести их в следующей редакции: событие
, события mouseevent
, KeyboardEvent
...и т. д., зависит от варианта использования обработчика.
Лучший способ увидеть все эти определения типа проверка .д.файлы TS с обеих машинопись & реагируют.
Также проверьте следующую ссылку для получения объяснения: https://stackoverflow.com/questions/28900077/why-is-event-target-not-element-in-typescript
Совместить оба Ницан's и Эдвин'ответы ы, я обнаружил, что как-то так это работает для меня:
update = (e: React.FormEvent<EventTarget>): void => {
let target = e.target as HTMLInputElement;
this.props.login[target.name] = target.value;
}
Я думаю, самый простой способ заключается в том, что:
type InputEvent = React.ChangeEvent<HTMLInputElement>;
type ButtonEvent = React.MouseEvent<HTMLButtonElement>;
update = (e: InputEvent): void => this.props.login[e.target.name] = e.target.value;
submit = (e: ButtonEvent): void => {
this.props.login.logIn();
e.preventDefault();
}
вы можете сделать такой в React
handleEvent = (e: React.SyntheticEvent<EventTarget>) => {
const simpleInput = (e.target as HTMLInputElement).value;
//for simple html input values
const formInput = (e.target as HTMLFormElement).files[0];
//for html form elements
}