情况:多个按钮,对应一个函数时,要区分是哪个按钮发出的事件源。
import React from 'react'
import { render } from 'react-dom'import { Card, Grid, Checkbox, Flex, Button, WingBlank } from 'antd-mobile';
const CheckboxItem = Checkbox.CheckboxItem;
import { createForm } from 'rc-form';
import style from '../model/model.less'
import { fetch } from 'antd-mobile/../../src/services/';
var i = 1;
state = {
votenumber : 0,
voternumber : 0,
value1:1,
data: [
{ value: 1, label: '迪丽热巴', imgpath : '/assets/yay.jpg', depart :'信息部', checked: false },
{ value: 2, label: '陈一发', imgpath : '/assets/yay.jpg', depart :'信息部', checked: false },
{ value: 3, label: '迪丽热巴', imgpath : '/assets/yay.jpg', depart :'信息部', checked: false },
{ value: 4, label: '陈一发', imgpath : '/assets/yay.jpg', depart :'信息部', checked: false },
{ value: 5, label: '迪丽热巴', imgpath : '/assets/yay.jpg', depart :'信息部', checked: false },
{ value: 6, label: '陈一发', imgpath : '/assets/yay.jpg', depart :'信息部', checked: false },
]
}
componentDidMount(){
fetch("platform.vote.searchempvoter",{
data: {},
success: (res)=>{
console.log('voternumber:', res.responseObject);
this.setState({
voternumber: res.responseObject
})
},
error: (err)=>{
},});
fetch("platform.vote.searchempvote",{
data: {},
success: (res)=>{
console.log('votenumber:', res.responseObject);
this.setState({
votenumber: res.responseObject
})
},
error: (err)=>{
},});
}
onChange = (row, checked) => {
console.log(row, checked);
const { data } = this.state;
data.some((r) => {
if(r.value === row.value) {
console.log(r);
r.checked = checked;
return true;
}
});
this.setState({
data: this.state.data,
});
}
votesubmite = (e) => {
fetch("platform.vote.insertempvote",{
data: {num : array},
success: (res)=>{
},
error: (err)=>{
},});
}
render() {
const {checked, data} = this.state;
return (
<div>
<div className={style.ruleimg}>
<img className={style.ruleimg} src={require('../../assets/yay.jpg')} alt="" />
<br/>
<WingBlank>
<Flex>
<Flex.Item><h4>候选人数:16</h4></Flex.Item>
<Flex.Item><h4>已投票数:{this.state.votenumber}</h4></Flex.Item>
<Flex.Item><h4>参与人数:{this.state.voternumber}</h4></Flex.Item>
</Flex>
</WingBlank>
<hr className={style.hr}/>
<WingBlank>
<Flex className={style.time}>
<Flex.Item className={style.time}><h4>投票于2018年1月20号结束!</h4></Flex.Item>
</Flex>
</WingBlank>
</div>
<br/>
<div>
{data.map(i => {
return (
<CheckboxItem key={i.value} checked={i.checked} onChange={(e) =>this.onChange(i, e.target.checked)}>
<img src={i.imgpath} style={{width:80,height:80}} />{i.label} {i.depart}
<a className={style.introright} onClick={(e) => { e.preventDefault(); alert('it'); }}>更多</a>
</CheckboxItem>
)
})}
</div>
<div className={style.intovote}>
<WingBlank>
<Button type="primary" onClick={this.votesubmite}>投票</Button>
</WingBlank>
</div><br/><br/><br/>
</div>
);
}
}