Question

我要使用打字稿将功能性道具从父级传递给子级组件：

import react, {Component} from 'react'
import Child from './Child'
//some type declaration
class Parent extends Component<{IProps},{IState}> {
state = {
id: 0;
name:'sample'
}
//some code
//I do not know how to declare type of below function!!!
onChildClickedHandler = (target:HTMLInputElement)=> {
this.setState({id:target.id})
}
render () {
<div>
<Child onChildClicked = {this.onChildClickedHandler} name={this.state.name} />
</div>
}
}

export default Parent

import React from 'react'
interface IChild  {
//I do not know how to declare type of below function!!!
onChildClicked: ({target:HTMLInputElement}) => void
name:string
}
const Child : React.SFC<IChild> = ({onChildClicked, name}) => {
return (<div>
<button type="text" id="1" onClick={({target})=>onChildClicked(target)}>
{name}
</button>
<button type="text" id="2" onClick={({target})=>onChildClicked(target)}>
    {name}
    </button>
</div>)

}

我使用解构来获取target而不是event.target传递给函数。如何以正确的方式在子无状态组件中为onChildClicked函数声明类型？

Answer 1

有一些问题：单击元素时，将发生MouseEvent可以定义的React.MouseEvent。现在您可以指定MouseEvent的元素上发生React.MouseEvent<HTML***Element>

现在您的点击发生在孩子的按钮上，event.target包含该Element标签的道具。例如<button name="bla" id="bla" onClick={***} />，该事件包含name，id，当然还有标记名本身。

所以一般的点击事件就像

handleClick(event: React.MouseEvent<HTMLButtonElement>)

// Destructuring `target` from `even` and `name, id` from `target` will look like 

handleClick({target:{name,id}}: React.MouseEvent<HTMLButtonElement>)

所以您的界面应该看起来像

onChildClicked: ({target:{name,id}}: React.MouseEvent<HTMLButtonElement>) => void

要了解更多事件类型（尤其是鼠标事件），请在type declaration of React之前选中DefinitelyTyped

在React中使用打字稿传递功能性道具

1 个答案: