React 18.2.0下如何实现无预设选项的多芯片输入组件？

直接基于Material-UI基础组件组合实现，完全可控且无第三方依赖问题，步骤如下：

核心实现逻辑 #

用useState管理芯片数组和输入框内容，监听输入框的onKeyDown事件捕获Enter键，将非空输入转为芯片；同时实现芯片删除逻辑，最后统一将芯片数据提交到后端。

完整代码示例 #

import { useState } from 'react';
import { TextField, Chip, Box, Button } from '@mui/material';

const ChipInput = () => {
  const [chips, setChips] = useState([]);
  const [inputValue, setInputValue] = useState('');

  // 处理Enter键添加芯片
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && inputValue.trim()) {
      // 可选：过滤重复芯片
      if (!chips.includes(inputValue.trim())) {
        setChips([...chips, inputValue.trim()]);
      }
      setInputValue('');
      e.preventDefault(); // 阻止表单默认提交行为
    }
  };

  // 处理芯片删除
  const handleDeleteChip = (chipToDelete) => {
    setChips(chips.filter(chip => chip !== chipToDelete));
  };

  // 提交芯片到后端
  const handleSubmit = () => {
    // 替换为你的后端接口请求逻辑
    fetch('/api/save-chips', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ chips }),
    })
    .then(res => res.json())
    .then(data => console.log('保存成功', data))
    .catch(err => console.error('保存失败', err));
  };

  return (
    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, alignItems: 'center', p: 1, border: '1px solid #e0e0e0', borderRadius: 1 }}>
      {chips.map((chip, index) => (
        <Chip
          key={index}
          label={chip}
          onDelete={() => handleDeleteChip(chip)}
          sx={{ height: 32 }}
        />
      ))}
      <TextField
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder="输入内容按Enter添加..."
        size="small"
        sx={{ flexGrow: 1, minWidth: 150 }}
        variant="standard"
        InputProps={{
          disableUnderline: true,
        }}
      />
      <Button onClick={handleSubmit} sx={{ ml: 1 }} variant="contained" size="small">保存</Button>
    </Box>
  );
};

export default ChipInput;

关键细节说明 #

• 完全可控：通过inputValue和chips状态完全掌控输入和芯片列表，避免第三方组件的不可控问题
• 样式定制：通过sx属性可自由调整容器边框、芯片尺寸、输入框样式等，适配你的UI需求
• 重复过滤：代码中加入了重复芯片判断，可根据业务需求移除该逻辑
• 表单行为控制：e.preventDefault()避免按下Enter时触发父表单的默认提交
• 后端适配：handleSubmit函数可根据项目API规范调整请求方式、参数结构和错误处理逻辑

这种实现基于Material-UI基础组件，完美适配React 18.2.0和最新版MUI，无第三方包兼容问题，所有逻辑均可自定义修改。

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