Soru Typescript: Tepki olay türleri


React olayları için doğru tip nedir. İlk önce kullanıyorum any basitlik uğruna. Şimdi, işleri temizlemeye çalışıyorum ve any tamamen.

Yani böyle basit bir şekilde:

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>
    )
  }
}

Burada etkinlik türü olarak ne tür kullanırım?

React.SyntheticEvent<EventTarget> bir hata alıyorum gibi çalışıyor görünmüyor name ve value üzerinde yok target.

Tüm olaylar için daha genel bir cevap gerçekten takdir edilecektir.

Teşekkürler


32
2018-02-07 04:06


Menşei




Cevaplar:


SyntheticEvent arayüz geneldir:

interface SyntheticEvent<T> {
    ...
    currentTarget: EventTarget & T;
    ...
}

Ve currentTarget genel kısıtlamanın bir kesişimidir ve EventTarget.
Ayrıca, etkinliklerinize bir girdi öğesi neden olduğu için FormEvent (tanım dosyasında, tepki veren dokümanlar).

Olmalı:

update = (e: React.FormEvent<HTMLInputElement>): void => {
    this.props.login[e.currentTarget.name] = e.currentTarget.value
}

40
2018-02-07 09:13



Tüm ortak etkinlik türlerini okumak için iyi bir nokta nedir? Hiçbir yerde bulunamıyor. - r.sendecky
Tepki olay türleri? Bunların hepsi Dokümanlardaki etkinlikler sayfası. - Nitzan Tomer
'EventTarget & HTMLInputElements' türünde 'name' bulunmuyor (TS v2.4) - Falieson
@Falieson Garip. Yaparsan let obj: HTMLInputElement; console.log(obj.name) tamam mı yoksa bir hata mı alıyorsun? - Nitzan Tomer
Bu hala bana aşağıdaki hatayı veriyor. "Özellik 'değeri",' EventTarget & HTMLInputElement 'türünde yok. " - tomhughes


Sorun, Olay türüyle ilgili değil, ancak yazı tipindeki EventTarget arabiriminin yalnızca 3 yöntemi vardır:

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;
}

Yani bu doğru name ve value EventTarget'ta yok. Yapmanız gereken şey, hedeflediğiniz özelliklere sahip spesifik eleman türüne yayın yapmaktır. Bu durumda olacak HTMLInputElement.

update = (e: React.SyntheticEvent): void => {
    let target = e.target as HTMLInputElement;
    this.props.login[target.name] = target.value;
}

Ayrıca React.SyntheticEvent yerine etkinlikler için, bunları aşağıdaki gibi de yazabilirsiniz: Event, MouseEvent, KeyboardEvent... vb, işleyicinin kullanım durumuna bağlıdır.

Tüm bu tür tanımları görmenin en iyi yolu .d.ts dosyalarını her iki yazı tipinden ve tepkisinden ayırmaktır.

Daha fazla açıklama için aşağıdaki linke de göz atın: Event.target neden Typescript'te Öğe Değil?


8
2018-02-07 07:29



ps. benim tür tanımı dosya genel SyntheticEvent <T> arayüzü göstermediğinden biraz modası geçmiş gibi görünüyor. Nitzan Tomer'in cevabı daha iyi. - Edwin
Evet, Nitzan'ın cevabı daha temiz görünüyor. Çaba için teşekkürler. - r.sendecky


Hem Nitzan'ın hem de Edwin'in cevaplarını birleştirmek için, bunun gibi bir şeyin benim için çalıştığını gördüm:

update = (e: React.FormEvent<EventTarget>): void => {
    let target = e.target as HTMLInputElement;
    this.props.login[target.name] = target.value;
}

4
2018-01-09 21:32