reactjs typescript将setState与用户输入React

aamkag61  于 2023-01-30  发布在  React
关注(0)|答案(2)|浏览(131)

在这个typescript react(create-react-app)的基本示例中,我尝试state.name通过用户输入更改www.example.com。
有人能给我一个工作的例子(我没有找到)或更好:文件在哪
剥绒机的(第二)误差为:
(54,24):错误TS 2322:类型“{更改:(e:事件)=〉无效;}"不能分配给类型“DetailedHTMLProps,HTMLAnputElement〉”。类型“{ onChange:(e:事件)=〉无效;}“不能赋给类型”InputHTMLAttributes“。属性”onChange“的类型不兼容。类型”(e:Event)=〉void“不能赋给类型”EventHandler〉|未定义“。类型”(e:Event)=〉void“无法分配给类型”EventHandler〉“。参数”e“和”event“的类型不兼容。类型”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;
trnvg8h3

trnvg8h31#

更改您的

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} />
xytpbqjk

xytpbqjk2#

就这么办吧:

handleChange = (event: Event) => {
      const { value } = event.target as unknown as { value: string, };
      this.setState({
        ...this.state,
        name: value.trim()
      });
};
  
<input type='text' onChange={this.handleChange} />

橡皮刷的线就会消失。

相关问题