class FriendsContainer extends React.Component {
constructor(props) {
super(props)
this.state = {
name: 'Tyler McGinnis',
friends: [
'Jake Lingwall',
'Sarah Drasner',
'Merrick Christensen'
],
}
this.addFriend = this.addFriend.bind(this)
}
addFriend(friend) {
this.setState((state) => ({
friends: state.friends.concat([friend])
}))
}
render() {
return (
<div>
<h3> Name: {this.state.name} </h3>
<AddFriend addNew={this.addFriend} />
<ShowList names={this.state.friends} />
</div>
)
}
}
class Example extends React.Component {
state = {
someProp: '',
};
someHandler = () => {
this.setState({ someProp: 'someValue' });
};
render() { ... }
}
this.addFriend в обработчик события addNew. JS так устроен что когда вы передаёте this.addFriend (куда угодно, хоть в обработчик, хоть в переменную), то будет передан только addFriend без this. Bind как раз нужен для того чтоб прибить FriendsContainer к контексту метода addFriend.class FriendsContainer extends React.Component {
addFriend = (friend) = >{
this.setState((state) => ({
friends: state.friends.concat([friend])
}))
}
}