React投票小程序,区分事件源。

情况:多个按钮,对应一个函数时,要区分是哪个按钮发出事件源。

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;


class VoteEmp extends React.Component {
  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}&emsp;{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>
    );
  }

}


export default VoteEmp
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值