我刚开始学习反应。
我得到了父组件:传递给子组件的Scrum:props中的MissionList函数。
父母是
var Scrum = React.createClass({
getInitialState: function () {
return {
secondsStopTime: 0,
minutesStopTime: 0,
hoursStopTime: 0,
titleInput: "",
contentInput: "",
ownerInput: "",
missions: []
};
},
handleDelete: function (index) {
console.log('handle delete was pressed with index' ,index);
},
render: function () {
return (
<div>
<MissionList missions={this.state.missions} onDelete={this.handleDelete}/>
</div>
);
}
});
孩子:MissionList是:
var MissionList = React.createClass({
render: function () {
return (<div>
{this.props.missions.map(function (mission, index) {
console.log(this);
return (<div key={index} className="col-md-4 col-xs-4">
<div className="alert alert-info">
<strong>{index + 1}</strong>
<input type="button" className="btn btn-default btn-xs delete-button "
onClick={this.props.onDelete(index)} value="X"/>
</div>
</div>);
}.bind(this))}
</div>);
}
});
如您所见,我将onDelete函数传递给MissionList。当我在控制台中检查组件时,我看到只有在任务列表的初始化中才会出现“使用索引0按下句柄删除”的打印。
提前谢谢。