使用道具的组件在初始化时起作用而不是个性

时间:2015-10-06 05:48:35

标签: javascript reactjs components

我刚开始学习反应。

我得到了父组件:传递给子组件的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按下句柄删除”的打印。

提前谢谢。

0 个答案:

没有答案