父子组件之间的2种事件绑定不起作用

时间:2019-02-23 01:53:36

标签: javascript reactjs ecmascript-6

我使用一组映射项,试图在子组件中切换类,但是父组件中的状态更改未传递给子组件。

我尝试了几种不同的方法(在 clicked 属性中使用{this.personSelectedHandler}{() => {this.personSelectedHandler()},但是都没有成功切换类。能够影响页面上呈现的所有数组项,因此绑定显然有问题。

People.js

import React, { Component } from 'react';
import Strapi from 'strapi-sdk-javascript/build/main';
import Person from '../../components/Person/Person';
import classes from './People.module.scss';
const strapi = new Strapi('http://localhost:1337');

class People extends Component {
    state = {
        associates: [],
        show: false
    };

    async componentDidMount() {
        try {
            const associates = await strapi.getEntries('associates');
            this.setState({ associates });
        }
        catch (err) {
            console.log(err);
        }
    }

    personSelectedHandler = () => {
        const currentState = this.state.show;
        this.setState({
            show: !currentState
        });

    };

    render() {
        return (
            <div className={classes.People}>
                {this.state.associates.map(associate => (
                    <Person
                        name={associate.name}
                        key={associate.id}
                        clicked={() => this.personSelectedHandler()} />
                ))}
            </div>
        );
    }
}

export default People;

Person.js

import React from 'react';
import classes from './Person.module.scss';
const baseUrl = 'http://localhost:1337';

const person = (props) => {
    let attachedClasses = [classes.Person];
    if (props.show) attachedClasses = [classes.Person, classes.Active];

    return (
        <div className={attachedClasses.join(' ')} onClick={props.clicked}>
            <img src={baseUrl + props.photo.url} alt={props.photo.name} />
            <p>{props.name}</p>
        </div>
    );
};

export default person;

(使用React 16.5.0)

1 个答案:

答案 0 :(得分:1)

首先,在您的 People.js 组件中,将person组件更改为:

         <Person
          name={associate.name}
          key={associate.id}
          clicked={this.personSelectedHandler}
          show={this.state.show}}/>

未通过道具展示,并且还通过这种方式引用了父类中的方法。 @Shawn的建议是由于事件冒泡而发生的,因此切换了所有类。

在子组件 Person.js 中,如果将onClick更改为:

onClick={() => props.clicked()}

单击props.click后的括号在那里执行该功能。因此,在personSelectedHandler函数中,您必须使用 event.preventDefault() ,在这种情况下,还必须传递如下事件:

onClick={(event) => props.clicked}

那应该可以解决您所有的问题。

以下是此解决方案的最小沙箱:

CodeSandBox.io