Question

在这个基本的typescript react示例中（create-react-app）我试图通过用户输入更改state.name。

有人可以向我展示一个工作示例（我没有找到）或更好：文档在哪里？

linter的（第二个）错误是：

（54,24）：错误TS2322：输入'{onChange：（e：Event）=＆gt;无效; }' 不是可分配给类型 “DetailedHTMLProps， HTMLInputElement＆GT;”。输入'{onChange：（e：Event）=＆gt;无效; }' 不是可分配给'InputHTMLAttributes'类型。属性'onChange'的类型是不兼容的。输入'（e：Event）=＆gt; void'不能分配给'EventHandler＆gt;类型|未定义”。输入'（e：Event）=＆gt; void'不能分配给'EventHandler＆gt;'类型。参数“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

更改您的

{'error': 
    [],
    'result': {
          'XXBTZEUR': [[1507633993, '4074.00000', '4074.90000'],
                       [1507633994, '4074.00000', '4075.00000'],
                       [1507634006, '4074.50000', '4075.00000'],
                       [1507634043, '4074.50000', '4074.90000'],
                       [1507634046, '4074.50000', '4075.00000'],
                       [1507634046, '4074.50000', '4075.50000'],
                       [1507634056, '4075.00000', '4075.50000'],
                       [1507634064, '4075.00000', '4075.60000'],
                       [1507634064, '4074.50000', '4075.60000'],
                       [1507634119, '4075.00000', '4075.50000'],
                       [1507634122, '4075.50000', '4075.50000'],
                       [1507635113, '4075.50000', '4075.60000']],
          'last': 1507635113}}

与

handleChange(e: Event)

和

handleChange (e: React.FormEvent<HTMLInputElement>)

与

e.target.name;

另外，您可能想要更改

e.currentTarget.name;

与

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

typescript使用户输入反应setState

1 个答案: