Javascript Bootstrap modals使用相同的单个值填充-Meteor+；反应

问题1：已解决

问题2:？？

我正在学习react+meteor+bootstrap，并使用它们为名为portfolio的简单模型实现CRUD。我被“积垢”中的“U”卡住了

下面是代码

ListPortfolios = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData(){
        return {
            portfolios: portfolios.find().fetch()
        };
    },
    renderPortfolios(){
        return this.data.portfolios.map((portfolio) => {
           return <PortfolioItem key={portfolio._id} portfolio={portfolio}></PortfolioItem>;
        });
    },
    render(){
        return(
            <div className="panel-group">
                <div className="panel panel-primary">
                    <div className="panel-heading">Portfolios</div>
                    <div className="panel-body" style={{height: 250}}>
                        <ul className="list-group" style={{overflowY: "scroll",maxHeight:230}}>
                            {this.renderPortfolios()}
                        </ul>
                    </div>
                </div>
            </div>
        );
    }
});

PortfolioItem = React.createClass({
    handleEditClick(event){
        console.log(event);
    },
    handleRemoveClick(event){
        event.preventDefault();
        Meteor.call("removePortfolio",this.props.portfolio._id);
    },
    render(){
        var editBtnStyle = {
            position: "absolute",
            right: 100,
            top: 10
        };
        var removeBtnStyle = {
            position: "absolute",
            right: 0,
            top: 10
        };

        return(
            <div>
                <li className="list-group-item" >
                    {this.props.portfolio.name}
                    <a  href=""
                        data-toggle="modal"
                        data-target="#myModal"
                        name="editBtn"
                        className="glyphicon glyphicon-pencil"
                        id={this.props.portfolio._id}
                        data-portfolio={this.props.portfolio}
                        style={editBtnStyle}
                        onClick={this.handleEditClick}>Edit
                    </a>
                    <a  href=""
                        name="removeBtn"
                        className="glyphicon glyphicon-remove"
                        id={this.props.portfolio._id}
                        style={removeBtnStyle}
                        onClick={this.handleRemoveClick}>Remove
                    </a>
                    <MyModal key={this.props.key} portfolio={this.props.portfolio}/>
                </li>
            </div>
        )
    }
});

MyModal = React.createClass({
    handleFormSubmit(event){
        console.log(event);
        event.preventDefault();
        var portfolioObjToSet = Session.get("Portfolio");
        //portfolioObjToSet.name = JSON.parse(event.target.dataset.portfolio).name.value;
        Meteor.call("updatePortfolio",this.props.portfolio._id,portfolioObjToSet);
    },
    render(){
        return(
            <div className="modal fade" id="myModal" role="dialog">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal">&times;</button>
                            <h4 className="modal-title">Modal Header</h4>
                        </div>
                            <div className="modal-body">
                                <form role="form" onSubmit={this.handleFormSubmit}>
                                <input name="newPortfolioName" type="text" defaultValue={this.props.portfolio.name}/>
                                <button type="submit" className="btn btn-default" data-dismiss="modal" value="Done"></button>
                                </form>
                            </div>
                            <div className="modal-footer">

                            </div>
                    </div>

                </div>

            </div>
        );
    }
});

ListPortfolions=React.createClass({
mixins:[数据]，
getMeteorData（）{
返回{
公文包：公文包.find（）.fetch（）
};
},
renderPortfolios（）{
返回此.data.portfolions.map（（portfolio）=>{
返回；
});
},
render（）{
返回(
投资组合

{this.renderPortfolios（）}

);
}
});
PortfolioItem=React.createClass({
HandleEdit单击（事件）{
console.log（事件）；
},
handleRemoveClick（事件）{
event.preventDefault（）；
Meteor.call（“removePortfolio”，this.props.portfolio.\u id）；
},
render（）{
var editBtnStyle={
位置：“绝对”，
右:100,，
前10名
};
var removeBtnStyle={
位置：“绝对”，
右:0,，
前10名
};
返回(

{this.props.portfolio.name}

)
}
});
MyModal=React.createClass({
handleFormSubmit（事件）{
console.log（事件）；
event.preventDefault（）；
var portfolioObjToSet=Session.get（“投资组合”）；
//portfolioObjToSet.name=JSON.parse（event.target.dataset.portfolio）.name.value；
Meteor.call（“updatePortfolio”，this.props.portfolio.\u id，portfolioObjToSet）；
},
render（）{
返回(
&时代；
模态头
);
}
});

如您所见，上面的代码包含三个组件。 列表组件、ListItem组件和 包含用于编辑/更新元组的表单的模态组件

现在，我有两个问题

1）当我单击特定列表项的“编辑”按钮时，模式会打开，这很好，但是文本框中需要更新的填充值始终是列表中第一个项的值，无论我单击哪个项的“编辑按钮”

2） 由于某种原因，不会触发模式中存在的表单的表单提交事件

我已经挖掘了整个代码很多次，但不知何故，我无法找到问题的原因

解决方案 问题1： html只为列表的所有行创建了一个模式，因为id是固定的，即“MyModal”。 为了解决这个问题，我用不同的id分别为每个列表项创建了一个模式。它起作用了。

解决方案 问题1： html只为列表的所有行创建了一个模式，因为id是固定的，即“MyModal”。 为了解决这个问题，我为每个列表项分别创建了一个模式，当然使用了不同的id。它起作用了

取代

<div className="modal fade" id="myModal" role="dialog">

与

其中itemN是一个迭代变量

<div className="modal fade" id={this.props.itemNumber} role="dialog">