我使用一组映射项,试图在子组件中切换类,但是父组件中的状态更改未传递给子组件。
我尝试了几种不同的方法(在 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)
答案 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}
那应该可以解决您所有的问题。
以下是此解决方案的最小沙箱: