Двухсторонняя привязка событий между родительскими и дочерними компонентами не работает

Question

Работая с массивом сопоставленных элементов, я пытаюсь переключить класс в дочернем компоненте, но изменение состояния в родительском компоненте не передается дочернему компоненту.

Я пробовал паруразличные подходы (использование {this.personSelectedHandler} против {() => {this.personSelectedHandler()} в атрибуте clicked , но ни один из переключаемых классов не был успешно. Единственное переключение классов, которое я могу сделать, влияет на ВСЕ элементы массива, отображаемые на странице, поэтому естьявно что-то не так с моим переплетом.

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)

Answer 1

Прежде всего, в вашем People.js компоненте вашего персонажа поменяйте на:

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

Вы не проходили проп-шоу , а такжессылка на метод внутри родительского класса выполняется таким образом.То, что предложил @Shawn, из-за которого все классы были переключены, происходит из-за пузырей событий.

В вашем дочернем компоненте Person.js , если вы измените свой onClick на:

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

Скобка после props.clicked выполняет функцию там.Итак, в вашей функции personSelectedHandler вы должны либо использовать event.preventDefault () , и в этом случае вам также нужно передать событие следующим образом:

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

и это должно решить все ваши проблемы.

Вот минимальная песочница для этого решения:

CodeSandBox.io