React组件 -- Input封装

慕仲卿2023-11-23 19:57

众所周知，antd的Input组件只有在被包裹在Form.Item中的时候才能进行校验；但是在很多情况下，需要对Input进行动态操作，这时需要对Input进行封装以获取更多操作权。

下面是对Input组件的一个封装，实现了原antd的Input组件valid状态展示的功能：

jsx 复制代码

const IInput = props => {
  let error = !props?.value;
  if (!props?.isChanged) {
    error = false;
  }
  return (
    <div>
      <Input
        styles={{
          input: {
            background: `${error ? '#fff' : 'auto'}`,
            borderColor: `${error ? '#ff4d4f' : 'auto'}`,
          },
        }}
        className={`${error ? 'input-status-error' : ''}`}
        {...props}
      ></Input>
      <div
        className={`ant-form-item-explain ${
          error ? 'ant-form-item-with-help' : 'ant-form-item-explain-connected'
        }`}
      >
        <div className="ant-form-item-explain-error">Please enter</div>
      </div>
    </div>
  );
};

封装好的组件在没有编辑之前不会进行value的合法性校验(由isChanged控制)

一旦编辑过，如果发现value是空则error的值就会变成true，此时会将提示信息和样式显示出来！