在无状态React组件中实现带清除图标的输入框可行吗？

当然可行啦！现在React的函数组件通过Hooks完全可以轻松实现这个功能，不用局限于类组件。我结合react-semantic-ui给你写个完整的实现方案：

基础实现（内部管理状态） #

这个版本是函数组件自己管理输入状态，和你提到的有状态组件体验一致：

import React, { useState } from 'react';
import { Input, Icon } from 'semantic-ui-react';

// 可清除的输入框组件
const ClearableInput = () => {
  // 用useState管理输入值，替代类组件的this.state
  const [inputValue, setInputValue] = useState('');

  // 处理输入变化
  const handleInputChange = (event, { value }) => {
    setInputValue(value);
  };

  // 处理清除按钮点击
  const handleClearClick = () => {
    setInputValue('');
  };

  return (
    <Input
      value={inputValue}
      onChange={handleInputChange}
      // 添加清除图标，绑定点击事件
      icon={<Icon name="close" onClick={handleClearClick} cursor="pointer" />}
      iconPosition="right"
      placeholder="请输入内容..."
    />
  );
};

// 调用示例
const App = () => {
  return <ClearableInput />;
};

export default App;

进阶实现（支持受控/非受控双模式） #

如果想让这个组件和semantic-ui的原生Input一样，既支持外部受控（传入value和onChange），也支持内部非受控，可以做如下扩展：

import React, { useState } from 'react';
import { Input, Icon } from 'semantic-ui-react';

const ClearableInput = ({ value: externalValue, onChange: externalOnChange, ...props }) => {
  // 判断是否是外部受控模式
  const isControlled = externalValue !== undefined;
  // 内部维护状态，仅在非受控模式下使用
  const [internalValue, setInternalValue] = useState('');
  // 当前输入值：受控模式用外部值，非受控用内部值
  const currentValue = isControlled ? externalValue : internalValue;

  const handleChange = (event, { value }) => {
    if (isControlled) {
      // 受控模式下，调用外部传入的onChange
      externalOnChange?.(event, { value });
    } else {
      // 非受控模式下，更新内部状态
      setInternalValue(value);
    }
  };

  const handleClear = () => {
    if (isControlled) {
      // 受控模式下，通知外部清除值
      externalOnChange?.(null, { value: '' });
    } else {
      // 非受控模式下，直接清空内部状态
      setInternalValue('');
    }
  };

  return (
    <Input
      value={currentValue}
      onChange={handleChange}
      icon={<Icon name="close" onClick={handleClear} cursor="pointer" />}
      iconPosition="right"
      {...props}
    />
  );
};

// 受控模式调用示例
const ControlledApp = () => {
  const [value, setValue] = useState('');
  return (
    <ClearableInput
      value={value}
      onChange={(e, { value }) => setValue(value)}
      placeholder="受控模式输入..."
    />
  );
};

export default ControlledApp;

关键说明 #

• 用useState Hook在函数组件中实现状态管理，这是现在函数组件替代类组件state的标准方式
• 通过给Input组件的icon属性传入带点击事件的Icon组件，实现点击清除功能
• 进阶版本兼容了受控和非受控两种模式，和semantic-ui原生组件的使用方式一致，复用性更强

内容的提问来源于stack exchange，提问作者artemean