客户网站开发全流程,硅谷网站开发薪酬,正邦网站建设 优帮云,公司网站维护价格表2023最近遇到一个需求#xff0c;需要在Input.textarea组件中#xff0c;设置属性disabled为true#xff0c;使textarea响应点击事件#xff0c;但直接绑定onClick并不会在禁用状态下被响应。
解决方法1
之后尝试了很多方法#xff0c;比如设置csspointer-events:no…最近遇到一个需求需要在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}TextAreavalue{inputValue}onChange{handleInputValueChange}disabled{disabled}style{disabled ? { pointerEvents: none } : {}}//div);
};export default CustomInput;
如下示例当disabled为true时也可响应点击事件令该文本框呈现选中状态。
