Передача функциональных реквизитов с машинописью в React

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 содержит подпорки этого тега элемента.например, <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

Для получения информации о других типах событий (в частности, событиях мыши) проверьте объявление типа для React с помощью DefiniteTyped