問題 1: 解決済み
問題2: ??
react+meteor+bootstrap を学習し、それらを使用してポートフォリオという名前の単純なモデルの CRUD を実装しています。「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">×</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>
);
}
});
ご覧のとおり、上記のコードには 3 つの反応コンポーネントが含まれています。タプルを編集/更新するためのフォームを含む List コンポーネント、ListItem コンポーネント、および Modal コンポーネント。
今、私には2つの問題があります。
1)特定のリスト項目の [編集] ボタンをクリックすると、モーダルが開きますが、更新が必要なテキスト ボックスに入力された値は、常にリストの最初の項目の値です。どのアイテムの「編集ボタン」をクリックするかは問題です。
2) モーダルに存在するフォームのフォーム送信イベントが、何らかの理由でトリガーされません。
コード全体を何度も掘り下げましたが、どういうわけか、問題の原因に到達できません。
解決策 問題 # 1: ID が修正されたため、リストのすべての行に対して html によって作成されたモーダルは 1 つだけで、それは "MyModal" でした。修正するために、もちろん別の ID を使用して、すべてのリスト項目のモーダルを個別に作成しました。出来た。