react 提交获取数据问题
var Couponlist = React.createClass({
getDefaultProps:function(){
return { data : [
{oid:123456,count:20,price:30,date:'2015-01-01'},
{oid:123458,count:30,price:40,date:'2015-01-02'},
{oid:123457,count:40,price:50,date:'2015-01-03'}
]}
},
render:function(){
return (
<div className = "djq-list-box over-hide">
<CouponListTitle/>
<CouponListBody {...this.props}/>
<CouponButton {...this.props} />
</div>
)
}
});
var CouponListTitle = React.createClass({
render:function(){
return (
<div className="djq-tit mt-04 mb-04">
<div className="bgc-blue white ta-c d-ib text">代金券</div>
</div>
)
}
});
var CouponListBody = React.createClass({
render:function(){
var items = [];
for(var i=0;i<this.props.data.length;i++){
items.push(
<CouponListBodyItem {...this.props.data[i]} checkboxIndex = {i} key = {i}/>
);
}
return (
<div>
{items}
</div>
)
}
});
var CouponListBodyItem = React.createClass({
getInitialState:function(){
return {checkbox:true}
},
checkHandle:function(){
this.setState({
checkbox:!this.state.checkbox
})
console.log(this)
},
render:function(){
return(
<div className="djq-list">
<h2 className="mt-04 mb-02 grey">订单编号：{this.props.oid} <span className="fr d-ib w-25 ta-c">订单状态</span></h2>
<div className="list-item">
<div className="w-75 d-ib">
<img className="img" src="demo1.jpg" />
<p>my demo </p>
<p>数量：<span className="orange">{this.props.count}</span> 金额：<span className="orange">￥{this.props.price}</span></p>
<p>有效期至 <span className="orange">{this.props.date}</span></p>
</div>
<div className="w-25 d-ib">
<div className="btn-group">
<p>
<span onClick={this.checkHandle.bind(this,this.props.checkboxIndex)} className={this.state.checkbox ? 'span-radius d-ib' : 'span-radius d-ib on'}></span>
</p>
</div>
</div>
</div>
</div>
)
}
});
var CouponButton = React.createClass({
FormData:function(){
console.log(this.props)
},
render:function(){
return (
<div className="ta-c mb-04">
<span onClick={this.FormData} className="large-btn bgc-orange white">支付</span>
</div>
)
}
});
React.render(<Couponlist/>,document.getElementById('example'));
有一个数据源 然后循环遍历出来3个列表 点哪个按钮 哪个按钮就高亮显示
然后想点提交按钮后 想把高亮显示的数据 console.log出来 我在选择按钮的时候 保存了一个当前的索引
之后就想不同 怎么利用索引 获取高亮的数据了
旧日支配者
8 years, 10 months ago
Answers
1.可以在Couponlist中维护一个state list，当选中的时候，往这个list中添加该数据，未选中则移除，这样支付的时候，只需要提交这个list即可。伪代码如下
var Couponlist = React.createClass({
getInitialState: function () {
return {model: []};
},
handlePay: function () {
console.log(this.state.list);
},
handleCheck:function () {
//修改 state.list
},
render: function () {
return (
<div className="djq-list-box over-hide">
<CouponListTitle/>
<CouponListBody {...this.props} check={this.handleCheck}/>
<CouponButton {...this.props} pay={this.handlePay}/>
</div>
)
}
});
2.将数据维护在state中，并添加选中属性
var Couponlist = React.createClass({
getInitialState: function () {
return {
data: [
{oid: 123456, count: 20, price: 30, date: '2015-01-01', checked: false},
{oid: 123458, count: 30, price: 40, date: '2015-01-02', checked: false},
{oid: 123457, count: 40, price: 50, date: '2015-01-03', checked: false}
]
}
},
render: function () {
return (
<div className="djq-list-box over-hide">
<CouponListTitle/>
<CouponListBody {...this.props}/>
<CouponButton {...this.props}/>
</div>
)
}
});
OOXX00
answered 8 years, 10 months ago
新的回答
之前理解错了意思，重新回答个。React 在组件间传递数据的确比较恼火。目前基本上只有通过 props 来传递。所以你必须在 button 和 listitem 共有的父组件上设置 state，再通过传递这个父组件定义事件处理函数来更新状态，通过状态更新来触发子组件的更新……好复杂的样子，还是看 jsfiddle 吧
http://jsfiddle.net/j5Lvhevt/3/
因为没有用你的样式表，我自己大概写了几个样式勉强能跑
先前的回答
this.checkHandle.bind(this,this.props.checkboxIndex)这个算什么语法，bind只有一个参数，就是对象。按你的意思，应该定义一个
createCheckHandle代替checkHandlecreateCheckHandle: function(checkboxIndex) { return function() { this.setState({ checkbox: !this.state.checkbox }); console.log(checkboxIndex, this); }.bind(this); },然后在
aonClick中onClick={this.createCheckHandle(this.props.checkboxIndex)}
破碎的泡沫
answered 8 years, 10 months ago