[英]react typescript with function passed as prop, but can't access
I am making a simple toggle button with react + typescript.我正在用 react + typescript 制作一个简单的切换按钮。 I want to practice some complex feature by passing function as prop to child component.我想通过将函数作为道具传递给子组件来练习一些复杂的功能。 I remember 'this.props' allows me to access all props passed to child in typescript.我记得“this.props”允许我访问在打字稿中传递给孩子的所有道具。 So if I define a function in parent, I should be able to call the function in child, right?因此,如果我在父级中定义一个函数,我应该能够在子级中调用该函数,对吧?
But I got the below error.但我得到了以下错误。 Can someone please give me a helping hand?有人可以帮帮我吗? Thank you.谢谢你。
Error:错误:
(property) React.DOMAttributes.onClick?: React.MouseEventHandler | (属性) React.DOMAttributes.onClick?: React.MouseEventHandler | undefined Type '(checked: boolean) => void' is not assignable to type 'MouseEventHandler'. undefined Type '(checked: boolean) => void' 不可分配给类型'MouseEventHandler'。 Types of parameters 'checked' and 'event' are incompatible. 'checked' 和 'event' 的参数类型不兼容。 Type 'MouseEvent' is not assignable to type 'boolean'.ts(2322)类型 'MouseEvent' 不可分配给类型 'boolean'.ts(2322)
Code:代码:
src/源/
import React from 'react';
import ReactDOM from 'react-dom';
import Switch from './Switch';
interface State {
buttonOn: boolean;
}
class App extends React.PureComponent<{}, State> {
public state: State = {
buttonOn: false,
};
onChange = (checked: boolean) => this.setState({ buttonOn: checked });
render() {
return (
<div>
<Switch
checked={this.state.buttonOn}
onChange={(checked) => this.onChange(!checked)}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app')!);
src/Switch/源/开关/
import React from 'react';
import './index.css';
interface Props {
checked: boolean;
onChange: (checked: boolean) => void;
disabled?: boolean;
}
export default class Switch extends React.PureComponent<Props> {
render() {
return (
<div>
<div onClick={this.props.onChange} /> {/* error here */}
</div>
);
}
}
so you have 2 options... Either所以你有两个选择......要么
this.props.onChange
is being returned by the onClick
lambda function.在onClick
lambda 函数返回this.props.onChange
的地方这样做。 You can also wrap this in curly braces if you want如果你愿意,你也可以用花括号把它包起来export default class Switch extends React.PureComponent<Props> {
render() {
return (
<div>
<div onClick={(e) => this.props.onChange} /> {/* error here */}
</div>
);
}
}
or;或者;
onClick
to understand the function signature as well as the type of arguments that are being passed in.更改您的类型...始终值得将鼠标悬停在诸如onClick
之类的属性上,以了解函数签名以及传入的参数类型。# src/App.tsx
import React from "react";
import Switch from "./Switch";
interface State {
buttonOn: boolean;
}
class App extends React.PureComponent<{}, State> {
public state: State = {
buttonOn: false
};
onChange = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log(event);
};
render() {
return (
<div>
<Switch checked={this.state.buttonOn} onChange={this.onChange} />
</div>
);
}
}
export default App;
Then in the Switch:然后在交换机中:
# src/Switch.tsx
import React from "react";
interface Props {
checked: boolean;
onChange: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
disabled?: boolean;
}
export default class Switch extends React.PureComponent<Props> {
render() {
return (
<div>
<button onClick={this.props.onChange}> Hello world </button>
</div>
);
}
}
I wrote a Codesandbox playground here so you can test it out yourself.我在这里写了一个 Codesandbox 操场,所以你可以自己测试一下。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.