当前位置：首页 > news >正文

input框不能输入

news 来源：原创 2024/5/10 13:38:03

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'，下拉框不开启，就是以前输入搜索的不留痕
<Input  autoComplete='off' />  // autoComplete='off'控制下拉框是否开启
5、form影响：

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

【原因】：由父组件传值给子组件时，连带着把父组件的 form 也传给子组件了，父组件的 “pubTitle” 和子组件 “pubTitle”字段名重复了，就导致在子组件中输入form不知道怎么渲染了
// 父组件
export default function A () {return (<div><Form><FormItem>{getFieldDecorator('pubTitle')(<Input />)}</FormItem></Form><BuildModal value={props} /> // 新建弹窗</div>)}// 子组件
export default function BuildModal  (propsss) {const { value } = propsss; // 解构父组件传过来的值
const { form } = value; // 从传过来的值中解构出form，注意：此时的form和父组件是同一个return (<div>....<Form><FormItem>{getFieldDecorator('pubTitle')(<Input />)}</FormItem></Form></div>)}
【解决】：打印log发现，从antd引用了form，每个页面都有form，不用和父组件公用一个
// 父组件
export default function A () {return (<div><Form><FormItem>{getFieldDecorator('pubTitle')(<Input />)}</FormItem></Form><BuildModal value={props} /> // 新建弹窗</div>)}// 子组件
export default function BuildModal  (propsss) {const { value, form: { getFieldDecorator }  } = propsss; // 解构父组件传过来的值，从传过来的值中解构出form，注意：此时的form和父组件不是同一个，因为没从value里解构React.useEffect(() => {console.log(propss, 'propsss')})return (<div>....<Form><FormItem>{getFieldDecorator('pubTitle')(<Input />)}</FormItem></Form></div>)}

此处与上面无关

用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,}})}