typescript react setState with user input

Question

在typescript react（create-react-app）的基本示例中，我試圖通過用戶輸入來更改state.name。

有人可以給我看一個工作示例（我沒有找到）或更好：文檔在哪裏？

的棉短絨的（第二）的錯誤是：

（54,24）：錯誤TS2322：類型「{的onChange：（E：事件）=>無效; }'不是 可指定爲 'DetailedHTMLProps， HTMLInputElement>'。鍵入'{onChange：（e：Event）=> void; }'不是 可分配給類型'InputHTMLAttributes'。 屬性'onChange'的類型不兼容。 類型'（e：Event）=> void'不可分配爲鍵入'EventHandler> |未定義」。 類型'（e：Event）=> void'不可分配給類型'EventHandler>'。 參數'e'和'事件'的類型不兼容。 類型'ChangeEvent'不可分配爲鍵入'Event'。 類型'ChangeEvent'中缺少屬性'cancelBubble'。

import * as React from 'react'; 
import './Hello.css'; 

interface Props { 
    name: string; 
} 

interface State { 
    name: string; 
} 

class Hello extends React.Component<Props, State> { 

public static defaultProps = { 
    name: 'John', 
}; 

constructor(props: Props) { 
    super(props); 
    this.state = { 
     name: props.name, 
    }; 
    this.handleChange = this.handleChange.bind(this); 
} 

handleChange(e: Event): void { 
    this.setState({ 
     name: e.target.value //Error : property 'value' does not exist on type 'EventTarget' 
    }); 
} 

render(): JSX.Element { 
    return (
     <div className="hello"> 
      Hello {this.state.name} 
      <input onChange={(e: Event) => this.handleChange(e)} /> //error is at this line 
     </div> 
    ); 
    } 
} 

export default Hello; 

Answer 1

更改

handleChange(e: Event) 

與

handleChange (e: React.FormEvent<HTMLInputElement>) 

和

e.target.name; 

與

e.currentTarget.name; 

此外，您可能要更改

<input onChange={(e: Event) => this.handleChange(e)} /> 

與

<input onChange={this.handleChange} />