Javascript 在初始化中使用道具功能而不是个性化的组件

我刚开始学反应

我得到了props中传递给child:MissionList func的父组件：Scrum

父母是

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>
    );
}
});

var Scrum=React.createClass({
getInitialState:函数（）{
返回{
秒停止时间：0，
分钟时间：0，
小时停止时间：0，
标题输入：“，
contentInput:“”，
所有者权益：，
特派团：[]
};
},
handleDelete:函数（索引）{
log（'handle delete被index'按下），index）；
},
渲染：函数（）{
返回(
);
}
});

孩子：任务列表是：

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>);
    }
});

var MissionList=React.createClass({
渲染：函数（）{
返回(
{this.props.missions.map（函数（任务，索引）{
console.log（this）；
返回(
{index+1}
);
}.bind（this））}
);
}
});

如您所见，我将onDelete函数传递给MissionList。当我在控制台中检查组件时，我看到“handle delete was pressed with index 0”的打印仅在任务列表的初始化中出现

---

提前谢谢。

尝试将

this.props.onDelete（index）

更改为

this.props.onDelete.bind（this，index）

，因为在第一种情况下，您会立即调用函数，但需要在单击元素时调用它解决方案有效，但我收到了以下警告：bind（）：React组件方法只能绑定到组件实例。请参阅ScrumYou可以将

.bind（this，index）

更改为

.bind（null，index）

来解决这个问题，因为React在使用

createClass

时会自动绑定组件方法。谢谢您，它起了作用，但您能解释一下原因吗？（更深入）