添加事件处理程序

Question

我希望能够在用户单击表单时获得个人。我尝试将事件处理程序添加到代码的返回部分，但我需要在 Person 类中实现类似

onClick={props.click}

的东西。 也有人可以推荐一些对打字稿教程的反应。

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

interface HelloWorldI {
    persons: ReadonlyArray<PersonI>,
    showPersons: boolean
}

interface PersonI {
    name: string,
    age: number,
}

export default class HelloWorld extends React.Component<{}, HelloWorldI> {
    constructor(props:any) {
        super(props)
        const p: ReadonlyArray<PersonI> = [
            { name: 'Max', age: 28},
            { name: 'Max', age: 28 },       
        ]
        this.state = {
            persons: p,
            showPersons: false
        }   
    }

    deletePersonHandler = (personIndex:any) => {
        const persons = this.state.persons;
        persons.slice(personIndex, 1);
        this.setState({ persons: persons });

    }

    togglePersonsHandler = () => {
        const doesShow:any = this.state.showPersons;
        this.setState({ showPersons: !doesShow });
    }

    public render() {
        let persons = null;

        if (this.state.showPersons) {
            persons = (
                <div>
                    {this.state.persons.map((person,index) => {
                        return <Person 
                           onClick={this.deletePersonHandler(index)}
                            name={person.name}
                            age={person.age} />
                    })}
                </div>
            );
        }

        return (
            <div>
                <button onClick={this.togglePersonsHandler}></button>  
                    {persons}
            </div>
        )
    }
}

class Person extends React.Component<{ name: string, age: number }, {}>     {
    render() {
        return (
            <div>
                <p> {this.props.name} and {this.props.age} </p>)
            </div>
        )
    }
}

谢谢。

Answer 1

处理这个问题的一种方法是将匿名箭头函数作为道具传递给每个人组件。你不能像现在这样将参数传递给 deletePersonH​​andler。

请尝试以下方法：

{
  this.state.persons.map((person,index) => {
  return (
      <Person 
        delete={() => this.deletePersonHandler(index)}
        name={person.name}
        age={person.age} 
      />
    )
  })
}

然后，在您的 Person 组件中，像这样附加 onClick 事件：

class Person extends React.Component<{ name: string, age: number }, {}>     {
  render() {
    return (
      <div onClick={this.props.delete}>
        <p> {this.props.name} and {this.props.age} </p>)
      </div>
    )
  }
}

Here 是一个与我在 Codepen 中尝试执行的操作有些相似的示例。单击 HTML 部分中的每个人，然后检查控制台中发生的情况。

附：我根本不使用 TypeScript，但请记住，您还需要在 Person 组件的 arguments 部分中声明要传递的函数。