Ссылка на пример, по которому есть вопросы - https://jsfiddle.net/jom80eaw/
Мне не понятно, как безымянная функция в методе addFriend
из компонента FriendContainer
получает аргумент friend
?
var FriendContainer = React.createClass({
getInitialState: function(){
return {
name: 'Tyler McGinnis',
friends: ['Jake Lingwall', 'Murphy Randall', 'Merrick Christensen']
}
},
addFriend: function(friend) {
this.setState({
friends: this.state.friends.concat([friend])
});
},
render: function(){
return (
<div>
<h3> Name: {this.state.name} </h3>
<AddFriend addNew={this.addFriend} />
<ShowList names={this.state.friends} />
</div>
)
}
});
var AddFriend = React.createClass({
getInitialState: function(){
return {
newFriend: ''
}
},
updateNewFriend: function(e){
this.setState({
newFriend: e.target.value
});
},
handleAddNew: function(){
this.props.addNew(this.state.newFriend);
this.setState({
newFriend: ''
});
},
render: function(){
return (
<div>
<input type="text" value={this.state.newFriend} onChange={this.updateNewFriend} />
<button onClick={this.handleAddNew}>Add Friend</button>
</div>
);
}
});
var ShowList = React.createClass({
render: function() {
var listItems = this.props.names.map(function(friend) {
return <li> {friend} </li>;
});
return (
<div>
<h3> Friends </h3>
<ul>
{listItems}
</ul>
</div>
)
}
})
ReactDOM.render(
<FriendContainer />,
document.getElementById('app')
);
В отдельности работа компонента AddFriend
, который отвечает за добавление нового "друга", вроде бы понятна, но как он передает значение этого нового "друга" в функцию, которая в методе.
UPD: добавил весь код
<AddFriend addNew={this.addFriend} />
тут вызываем и передаемthis.props.addNew(this.state.newFriend);