问答

点击选中的多选框,会在已选那一栏显示你选中的内容,然后点击提

作者:admin 2021-04-20 我要评论

题目描述 题目来源及自己的思路 相关代码 粘贴代码文本(请勿用截图) onChange=(e)={ let pridepictData=this.state.pridepictData;console.log("触发",e);// c...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

题目描述

题目来源及自己的思路

相关代码

粘贴代码文本(请勿用截图)
onChange=(e)=>{

let pridepictData=this.state.pridepictData;
console.log("触发",e);
// console.log("pridepictData",pridepictData);

if(!e.target.checked){

  pridepictData.splice(pridepictData.findIndex(item => item.optionid ===e.target.value), 1)
  // let i = pridepictData.find((item,key)=>{

// if (item.optionid === e.target.value) // return key; // }); // console.log("删除:",i);
// if (i!==-1){ // pridepictData.splice(i,1); // } // console.log("pridepictData",pridepictData); pridepictData.forEach((item, i) => {

    if(item.optionid==e.target.value){//当前操作的数据

// console.log("删除",e.target.value)
// pridepictData.splice(pridepictData.lastIndexOf(e.target.value),1); // item.isChecked=e.target.checked; // // console.log("pridepictData",pridepictData) }

  });
}
this.setState({pridepictData})
this.props.onPress(e);

}
/* [handleChange 获取] /
handleChange=(value,text)=>{

if(text=='input'){
  if(value!=' '&&!isNaN(value)){
    this.setState({input:value})
  }
}else{
  this.setState({unit:value})
}

}
/* [getData 过滤复数据 拿到本页面渲染数据] /
getData=(data)=>{

let pridepictData=[];
console.log("pridepictData",pridepictData);
if(data&&data[0]){
  data.forEach((item)=>{
    let repeat=false;
    if(data&&data[0]){
      pridepictData.forEach((item1)=>{
        if(item1.optionid==item.symid){
          repeat=true

}

      })
    }
    if(!repeat){//未重复

let obj={

        moduleid:2,
        optionid:item.symid,
        optionname:item.symname,
        input:'',
        unit:'',
        useflag:'1',
        creator:window.sessionStorage.getItem('userid'),
        updator:window.sessionStorage.getItem('userid'),
        parentids:item.parentids,
        parentid:item.parentid,
        isChecked:true,
      }
      pridepictData.push(obj);
    }
  })
}
this.setState({pridepictData})

}
/* [onChoice 点击选择框函数] /
onChoice=()=>{

let {pridepictData,input,unit}=this.state;
let {getFieldValue,onChange,setInitData}=this.props;
let {othersym}=this.state;
let data=[];
let data1 = [];
let item = {
  creator: "595566901963264021",
  input:'',
  isChecked: true,
  moduleid: 2,
  optionid: -1,
  optionname:othersym,
  parentid: 141,
  parentids: "0/1/5/26/141/",
  unit: "天",
  updator: "595566901963264021",
  useflag: "1"

};

// debugger

pridepictData.push(item);

pridepictData.forEach((item)=>{
  // console.log("pridepictData",item)

if(item.isChecked){ //选中的子项
item.input=input;

    item.unit=unit;
    if (item.optionname)
      data.push(item);
  }else{
    item.input=input;
    item.unit=unit;
    data1.push(item);
  }
})
let pridepictValue=getFieldValue('pridepict');
if(pridepictValue==''||pridepictValue&&pridepictValue.length==0){//第一次设置值

onChange(data);

  console.log("pridepict1",data)
  setInitData({pridepict:data});
}else{
  console.log("pridepictValue",pridepictValue)
  let arr=[];//需要添加的数据集合

console.log("选中",arr)

  pridepictData.forEach((item)=>{
    let repeat=false;
    pridepictValue.forEach((item2)=>{
      if (item.optionid==-1&&item2.optionid==-1){
        if(item.optionname==item2.optionname){//重复  替换相关数据

item.input=item2.input;

          item.unit=item2.unit;
          item.othersym=item2.othersym;
          repeat=true;
        }
      }else if(item.optionid==item2.optionid){//重复  替换相关数据

item.input=item2.input;

        item.unit=item2.unit;
        item.othersym=item2.othersym;
        repeat=true;
      }
    })
    if(!repeat){//没重复x

arr.push(item);

    }
  })
  arr.forEach((item)=>{
        if (item.optionname==''){
        }else{
          pridepictValue.push(item)
        }}
    )
  onChange(pridepictValue)
  setInitData({pridepict:pridepictValue})
}
this.props.onPress([]);
this.setState({pridepictData:data1,othersym:'',input:'',unit:'天'})

}

handleChange2=(value,name)=>{
    if(name=='othersym'){
        // if(isNaN(value)){

this.setState({othersym:value})

        // }

}

}

render() {

const {loading,pridepictData,data}=this.state;
return (
    <Container>
      <LeftBox>已选</LeftBox>
      <RightBox>
      {
        pridepictData&&pridepictData.length>0?
        <SpecRow>
            {
              pridepictData.map((item)=>{
                  return(
                    <SpecCol span={8} key={item.optionid+item.optionname}>
                      <Checkbox

value={item.optionid}

                          // checked={true}

checked={item.isChecked}

                                onChange={this.onChange}>{item.optionname}
                      </Checkbox>
                    </SpecCol>
                  )
              })
            }
        </SpecRow>
        :null

}

      </RightBox>
      <LeftBox>其他</LeftBox>
      <RightBox span={8}>
        <Row>
          <Input style={{width:'300px'}} placeholder="请填写其他症状" value={this.state.othersym} onChange={(e)=>{this.handleChange2(e.target.value,'othersym')}}/>
        </Row>
      </RightBox>
      <SpecFooter>
        <div style={{display:'flex'}}>
          <Input style={{ width:100}} value={this.state.input} onChange={(e)=>{this.handleChange(e.target.value,'input')}}/>
          <Select value={this.state.unit} style={{ width: 75 }} onChange={(value)=>{this.handleChange(value,'unit')}}>
            <Option value={"天"}>天</Option>
            <Option value={"周"}>周</Option>
            <Option value={"月"}>月</Option>
            <Option value={"季度"}>季度</Option>
            <Option value={"年"}>年</Option>
          </Select>
        </div>
        <Button type="primary" onClick={this.onChoice} >提交</Button>
      </SpecFooter>
    </Container>
);

}
}

你期待的结果是什么?实际看到的错误信息又是什么?

image

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器