Javascript 父组件和子组件之间的双向事件绑定不起作用

使用映射项数组时，我试图切换子组件中的类，但父组件中的状态更改不会传递给子组件

我尝试了两种不同的方法（使用

{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;

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;

import React，{Component}来自'React'；
从“Strapi sdk javascript/build/main”导入Strapi；
从“../../components/Person/Person”导入人员；
从“/People.module.scss”导入类；
const strapi=新strapi（'http://localhost:1337');
类人员扩展组件{
状态={
合伙人：[]，
节目：假
};
异步组件didmount（）{
试一试{
const associates=wait strapi.getEntries（'associates'）；
this.setState（{associates}）；
}
捕捉（错误）{
控制台日志（err）；
}
}
personSelectedHandler=（）=>{
const currentState=this.state.show；
这是我的国家({
显示：！currentState
});
};
render（）{
返回(
{this.state.associates.map（associate=>(
this.personSelectedHandler（）}/>
))}
);
}
}
导出默认用户；

Person.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;

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”导入React；
从“/Person.module.scss”导入类；
常量baseUrl=http://localhost:1337';
const person=（道具）=>{
让attachedClasses=[classes.Person]；
if（props.show）attachedClasses=[classes.Person，classes.Active]；
返回(
{props.name}

);
};
出口违约人；

（使用React 16.5.0）

首先，在People.js组件中，将person组件更改为：

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

props.clicked后面的括号执行那里的函数。因此，在personSelectedHandler函数中，您必须使用event.preventDefault（）在这种情况下，您还必须像下面这样传递事件：

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

这会解决你所有的问题

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

---

您试图在子级中使用props.show，但您没有从父级传递该道具。在

Person.js

中，尝试将

onClick={props.clicked}

更改为

onClick={（）=>props.clicked（）}

在

People.js

中，您可以将clicked作为

click={this.personSelectedHandler}传递<代码> > OnCase >并通过<代码>显示/<代码>导致所有数组项在单击时切换类，而不只是单击项。请考虑显示并单击Func in For组件。这是因为一旦<代码>显示/<代码>父类上的更改状态，它将反映所有子组件的使用情况。该状态。是的，函数是无状态的。您还可以使用
Hooks
来设置状态，具体取决于您所使用的React版本。