【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自定义表单组件，可以直接使用下面的代码：

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时，也可响应点击事件，令该文本框呈现选中状态。