typeafe select onChange event using reactjs и машинописный текст

Question

Я выяснил, как связать обработчик события с элементом SELECT с помощью уродливого приведения события к любому.

Возможно ли получить значение в безопасном типе без литья в какой-либо?

import React = require('react'); 

interface ITestState { 
    selectedValue: string; 
} 

export class Test extends React.Component<{}, ITestState> { 

    constructor() { 
     super(); 
     this.state = { selectedValue: "A" }; 
    } 

    change(event: React.FormEvent) { 
     console.log("Test.change"); 
     console.log(event.target); // in chrome => <select class="form-control" id="searchType" data-reactid=".0.0.0.0.3.1">...</select> 

     // Use cast to any works but is not type safe 
     var unsafeSearchTypeValue = ((event.target) as any).value; 

     console.log(unsafeSearchTypeValue); // in chrome => B 

     this.setState({ 
      selectedValue: unsafeSearchTypeValue 
     }); 
    } 

    render() { 
     return (
      <div> 
       <label htmlFor="searchType">Safe</label> 
       <select className="form-control" id="searchType" onChange={ e => this.change(e) } value={ this.state.selectedValue }> 
        <option value="A">A</option> 
        <option value="B">B</option> 
       </select> 
       <h1>{this.state.selectedValue}</h1> 
      </div> 
     ); 
    } 
} 

Answer 1

С обновлением моих типизаций в отредактируйте 0.14.43 (я точно не знаю, когда это было введено), тип React.FormEvent теперь является общим, и это устраняет необходимость в литье.

import React = require('react'); 

interface ITestState { 
    selectedValue: string; 
} 

export class Test extends React.Component<{}, ITestState> { 

    constructor() { 
     super(); 
     this.state = { selectedValue: "A" }; 
    } 

    change(event: React.FormEvent<HTMLSelectElement>) { 
     // No longer need to cast to any - hooray for react! 
     var safeSearchTypeValue: string = event.currentTarget.value; 

     console.log(safeSearchTypeValue); // in chrome => B 

     this.setState({ 
      selectedValue: safeSearchTypeValue 
     }); 
    } 

    render() { 
     return (
      <div> 
       <label htmlFor="searchType">Safe</label> 
       <select className="form-control" id="searchType" onChange={ e => this.change(e) } value={ this.state.selectedValue }> 
        <option value="A">A</option> 
        <option value="B">B</option> 
       </select> 
       <h1>{this.state.selectedValue}</h1> 
      </div> 
     ); 
    } 
} 

Answer 2

Самый простой способ добавить тип в переменную, который принимает значение, например:

var value: string = (event.target as any).value; 

Или вы могли бы бросить value собственности, а также event.target вроде этого:

var value = ((event.target as any).value as string); 

Edit:

И последнее, что вы можете определить, что EventTarget.value находится в отдельном файле .d.ts. Тем не менее, тип должен быть совместим там, где он используется в другом месте, и вы в конечном итоге снова используете any.

globals.d.ts

interface EventTarget { 
    value: any; 
} 

Answer 3

Насколько я могу сказать, что это в настоящее время не представляется возможным - литая всегда требуется.

Чтобы сделать возможным, необходимо отредактировать .d.ts реакции, чтобы сигнатура onChange элемента SELECT использовала новый SelectFormEvent. Новый тип события будет раскрывать цель, которая выдает значение. Тогда код может быть видовым.

В противном случае всегда будет необходимость в отливке.

Я мог бы инкапсулировать все это в теге MYSELECT.

Answer 4

В дополнение к @ thoughtrepo отвечают:

Пока мы не определенно набрали события в React это может быть полезно иметь специальный целевой интерфейс для управления вводом:

export interface FormControlEventTarget extends EventTarget{ 
    value: string; 
} 

, а затем в вашей код приведен к этому типу, где это целесообразно иметь INTELLISENSE поддержки:

import {FormControlEventTarget} from "your.helper.library" 

(event.target as FormControlEventTarget).value; 

Answer 5

Возможно ли получить значение в безопасном типе без каста?

Да. Если вы уверены в элементе обработчик прикреплен, вы можете сделать:

<select onChange={ e => this.selectChangeHandler(e) }> 
    ... 
</select> 

private selectChangeHandler(e: React.FormEvent) 
{ 
    var target = e.target as HTMLSelectElement; 
    var intval: number = target.value; // Error: 'string' not assignable to 'number' 
} 

Live demo

машинописи компилятор позволит этого типа на утверждение, так как HTMLSelectElement является EventTarget. После этого он должен быть безопасным по типу, потому что вы знаете, что e.target - это HTMLSelectElement, потому что вы просто привязали к нему свой обработчик событий.

Однако для гарантии типа безопасности (который в данном случае имеет значение, когда рефакторинг), он также необходим для проверки фактического выполнения типа:

if (!(target instanceof HTMLSelectElement)) 
{ 
    throw new TypeError("Expected a HTMLSelectElement."); 
} 

Answer 6

Я попытался с помощью React.FormEvent<HTMLSelectElement>, но это привело к ошибке в редакторе, событие, хотя нет EventTarget видно в коде:

Свойство «значение» не существует на значение типа 'EventTarget'

Тогда я изменил React.FormEvent к React.ChangeEvent и это помогло:

private changeName(event: React.ChangeEvent<HTMLSelectElement>) { 
    event.preventDefault(); 
    this.props.actions.changeName(event.target.value); 
} 

Answer 7

это работает:

type HtmlEvent = React.ChangeEvent<HTMLSelectElement> 

const onChange: React.EventHandler<HtmlEvent> = 
    (event: HtmlEvent) => { 
     console.log(event.target.value) 
    }