【React】如何使antd禁用状态的表单输入组件响应点击事件?

最近遇到一个需求,需要在<Input.textarea>组件中,设置属性disabled为true,使textarea响应点击事件,但直接绑定onClick并不会在禁用状态下被响应。

解决方法1

之后尝试了很多方法,比如设置csspointer-events:none,给textarea添加onMouseClick事件,在textarea父级套一层div,设置禁止向下传播均无效。但自己在原生textarea上启用pointer-events:none,是可以在disabled的情况下响应点击事件的。所以遇到这种情况,

第一种方法是,可以自己拿原生的textarea封装一个组件,修改pointer-events:none即可。

解决方法2

在textarea同级创建一个透明蒙层,把点击事件绑定在这个蒙层上。参考该链接

解决方法3

用antd的textarea组件,再自己套一层写成antd自定义表单组件,可以直接使用下面的代码:

ts 复制代码
import { useState } from 'react';
import { Input } from 'antd';

const { TextArea } = Input;

interface IProps {
    disabled: boolean;
    isSelected?: boolean;
    onClick: (a?: any) => void;
    onChange?: (a?: any) => void;
    children: string | undefined;
}

const CustomInput = (props: IProps) => {
    const { disabled, onClick = () => {}, isSelected = false, onChange } = props;
    const [inputValue, setInputValue] = useState('');
    const triggerChange = (value: any) => {
        onChange && onChange(value);
    };
    const handleInputValueChange = (e: any) => {
        setInputValue(e.target.value);
        triggerChange(e.target.value);
    };

    const handleClick = () => {
        if (disabled) {
            onClick();
        }
    };

    return (
        <div style={{ position: 'relative', backgroundColor: isSelected ? 'green' : '' }} onClick={handleClick}>
            <TextArea
                value={inputValue}
                onChange={handleInputValueChange}
                disabled={disabled}
                style={disabled ? { pointerEvents: 'none' } : {}}
            />
        </div>
    );
};

export default CustomInput;

如下示例,当disabled为true时,也可响应点击事件,令该文本框呈现选中状态。

相关推荐
薛定谔的算法10 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
小lan猫13 小时前
React学习笔记(一)
前端·react.js
江城开朗的豌豆18 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
前端人类学18 小时前
React框架详解:从入门到精通(详细版)
react.js·redux
江城开朗的豌豆18 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
艾小码19 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
bug_kada19 小时前
详解 React useCallback & useMemo
前端·react.js
用户7847215099119 小时前
Zustand源码解读(更新中)
react.js
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
XiaoSong2 天前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js