input框不能输入

目录

1、遮盖层影响：

2、类型影响：

3、监听键盘事件影响：

4、input属性影响：

5、form影响：

---

1、遮盖层影响：

        首先看input框能不能获取光标，如果光标不能获取，可能是有遮盖层，或者设置了input的属性之类的，要检查清楚，如果有遮盖层一般都是定位的原因，要检查z-index

2、类型影响：

        如果能获取光标，只有某种类型的不能输入，要检查代码里是否存在正则验证和type的类型

3、监听键盘事件影响：

        如果以上两种情况都没问题，还有就是看看文件里有没有监听键盘事件例如：keydown，keyup，keypress等，看看是否阻止了默认事件，比如使用了preventDefault()，这个时候一定要检查清楚，如果使用了jquery，看看有没有return false的代码，因为在jquery中return false，既阻止了冒泡，又消除了默认事件

4、input属性影响：

        autoComplete='off'，下拉框不开启，就是以前输入搜索的不留痕

  // autoComplete='off'控制下拉框是否开启

5、form影响：

       【现象】：就是我目前碰到的情况，父组件里套着子组件，子组件是个弹窗，在弹窗里对公告标题输入，发现输入后光标一离开，输入的内容就不显示

      【原因】：由父组件传值给子组件时，连带着把父组件的 form 也传给子组件了，父组件的 “pubTitle” 和子组件 “pubTitle”字段名重复了，就导致在子组件中输入form不知道怎么渲染了

// 父组件
export default function A () {

    return (
        

            

                
                    {getFieldDecorator('pubTitle')(
                        
                    )}
                
            
             // 新建弹窗
        
    )

}



// 子组件
export default function BuildModal  (propsss) {

const { value } = propsss; // 解构父组件传过来的值
const { form } = value; // 从传过来的值中解构出form，注意：此时的form和父组件是同一个

    return (
        

            ....
            

                
                    {getFieldDecorator('pubTitle')(
                        
                    )}
                
            
        
    )

}

      【解决】：打印log发现，从antd引用了form，每个页面都有form，不用和父组件公用一个

 

// 父组件
export default function A () {

    return (
        

            

                
                    {getFieldDecorator('pubTitle')(
                        
                    )}
                
            
             // 新建弹窗
        
    )

}



// 子组件
export default function BuildModal  (propsss) {

const { value, form: { getFieldDecorator }  } = propsss; // 解构父组件传过来的值，从传过来的值中解构出form，注意：此时的form和父组件不是同一个，因为没从value里解构

React.useEffect(() => {
    console.log(propss, 'propsss')
 })

    return (
        

            ....
            

                
                    {getFieldDecorator('pubTitle')(
                        
                    )}
                
            
        
    )

}

此处与上面无关

用react函数组件公用model的写法即公共数据存储空间

部分代码

// model页面：
import * from projectService from '../services';

export default {
    namespace: 'projectModel',
    state: {
       loading: false,
       projectList: [],
    },

    reducer: {
       setState (state, { payload }) {
           return { ...state, ...payload };
       } 
    },
    
    thunk: {
        fetch ({ payload }, { put }) {
            put({  // 接口没请求成功之前loading加载
               type: 'projectModel/setState',
                payload: {
                     loading: true,
                 },
             })
            projectService.A().then(res => {
                if(res.code === 200) {
                    put({
                        type: 'projectModel/setState',
                        payload: {
                            loading: false,  // 接口请求成功loading不加载
                            projectList: res.data,
                        },
                    })
                }
            })
        }
    },
    
    // 一进页面就会先执行下面写的
    subscription: {
        setup ({ dispatch, history }) {
            return history.listen((location) => {
                if(location.pathname === '/system/projectPageView') { // 想要一进页面就调接口，写上页面的路由
                    dispatch({
                        type: 'projectModel/fetch',
                        payload: { pageNum:1, pageSize: 10 },
                        async: true,  // 表示异步
                    })
                }
            })
        }
    },

}




export function A (value) {
    return request({
        url: '',
        message: 'post',
        data: {
            ...value,
        }
    })

}