模拟form表单离焦校验判断input框中是否有值【react】

Nicole1.

已于 2023-09-06 16:32:55 修改

阅读量200

点赞数

文章标签： react.js javascript 前端

于 2023-03-29 18:11:45 首次发布

本文链接：https://blog.csdn.net/m0_52743009/article/details/129841995

版权

需求：多个input输入框，对其进行遍历，校验每一个输入框，判断输入框是否有值

定义挂载对象

const liRefList = useRef([]); // 文本框挂载

挂载对象的方法

const getRef = (dom: never) => {
    liRefList.current.push(dom);
  };

离焦校验方法

 const handlerShow = (e: any, index: number) => {
    if (!e.target.value && state.tableListDataSource[index].checked) {
      state.tableListDataSource[index].tagValueList = undefined;
    }
  };

点击获焦方法

 const addTextChange = (e: any, record: any, type: number, indexs: number) => {
    //const index = state.tableListDataSource.findIndex(
      //(item: { key: number }) => item.key == +record.key,
    //);
    //const tableListDataSourceTemp = state.tableListDataSource;
    if (type === 1) {
      if (e.target.checked) {
        liRefList.current.map(
          (item: any) =>
            item &&
            item.props.id == indexs &&
            item.focus({
              cursor: 'start',
            }),
        );
        //tableListDataSourceTemp[index].checked = true;
        //tableListDataSourceTemp[index].tagValueList = [];
      } else {
        //tableListDataSourceTemp[index].checked = false;
        //tableListDataSourceTemp[index].tagValueList = [];
      }
    }
}

input框

 <div>
    {dataList.map((record)=>(
        <div>
           <Checkbox
             checked={record.checked}
             onChange={(e) => {
               addTextChange(e, record, 1, index);
             }}
             style={{ marginBottom: 0, marginTop: 0 }}
           />
           <Input
             id={index + ''}
             onBlur={(e) => handlerShow(e, index)}
             ref={getRef}
             value={
               record.tagValueList !== undefined && record.tagValueList.length > 0
                 ? record.tagValueList[0].label
                 : ''
             }
             placeholder='请输入文本'
             onChange={(e) => {
               addTextChange(e, record, 2, index);
             }}
             allowClear
             style={{
               marginLeft: '8px',
               border:
                 (record.checked && record.tagValueList === undefined) 
                   ? '1px solid #f22436'
                   : '1px solid #d9d9d9',
             }}
           />
        </div>
    ))}
 </div>