React分类组件问题：实现单个分类选中红边框及单独删改

你的问题核心在于用了一个全局的布尔状态checkboxState来控制所有按钮的样式，所以点击任何一个都会让所有按钮同步变化。我们需要改成跟踪单个选中项的索引，这样就能实现单独选中，进而完成删除和编辑操作。

具体修改步骤： #

1. 更新状态结构
   把原来的checkboxState替换成selectedIndex（初始值为null，表示无选中项），同时复用term状态来支持编辑功能：

   this.state = {
     term: '',
     categories: [],
     selectedIndex: null, // 跟踪当前选中的分类索引
     hidden: true
   };
   

2. 修改分类按钮的点击与样式逻辑
   给每个按钮的点击事件传递当前索引，点击时更新selectedIndex；样式根据当前索引是否等于selectedIndex来判断：

   {this.state.categories.map((category, index) => (
     <button
       key={index}
       style={{ 
         borderColor: this.state.selectedIndex === index ? 'red' : '' 
       }}
       onClick={() => this.setState({ selectedIndex: index })}
     >
       {category}
     </button>
   ))}
   

3. 实现删除功能
   删除时检查是否有选中项，然后通过过滤数组移除对应索引的分类：

   deleteCategory = () => {
     const { categories, selectedIndex } = this.state;
     if (selectedIndex === null) {
       alert('Please select a category first!');
       return;
     }
     this.setState({
       categories: categories.filter((_, idx) => idx !== selectedIndex),
       selectedIndex: null // 删除后清空选中状态
     });
   };
   

4. 实现编辑功能
   编辑时先把选中的分类名称填充到输入框，然后修改提交逻辑（如果有选中项则更新，否则添加新分类）：

   editCategory = () => {
     const { categories, selectedIndex } = this.state;
     if (selectedIndex === null) {
       alert('Please select a category first!');
       return;
     }
     this.setState({ term: categories[selectedIndex] });
   };
   
   addCategory = (event) => {
     event.preventDefault();
     const { term, categories, selectedIndex } = this.state;
     if (term === '') {
       alert('Please name your category!');
       return;
     }
     // 如果有选中项，执行更新；否则添加新分类
     if (selectedIndex !== null) {
       const updatedCategories = [...categories];
       updatedCategories[selectedIndex] = term;
       this.setState({
         term: '',
         categories: updatedCategories,
         selectedIndex: null
       });
     } else {
       this.setState({
         term: '',
         categories: [...categories, term]
       });
     }
   };
   

完整修改后的代码： #

class Categories extends Component {
  constructor(props) {
    super(props);
    this.state = {
      term: '',
      categories: [],
      selectedIndex: null,
      hidden: true
    };
  }

  onChange = (event) => {
    this.setState({ term: event.target.value });
  };

  addCategory = (event) => {
    event.preventDefault();
    const { term, categories, selectedIndex } = this.state;
    if (term === '') {
      alert('Please name your category!');
      return;
    }
    if (selectedIndex !== null) {
      const updatedCategories = [...categories];
      updatedCategories[selectedIndex] = term;
      this.setState({
        term: '',
        categories: updatedCategories,
        selectedIndex: null
      });
    } else {
      this.setState({
        term: '',
        categories: [...categories, term]
      });
    }
  };

  deleteCategory = () => {
    const { categories, selectedIndex } = this.state;
    if (selectedIndex === null) {
      alert('Please select a category first!');
      return;
    }
    this.setState({
      categories: categories.filter((_, idx) => idx !== selectedIndex),
      selectedIndex: null
    });
  };

  editCategory = () => {
    const { categories, selectedIndex } = this.state;
    if (selectedIndex === null) {
      alert('Please select a category first!');
      return;
    }
    this.setState({ term: categories[selectedIndex] });
  };

  render() {
    return (
      <div className="categories">
        <h1>Categories</h1>
        <div className='actions'>
          <button className="delete" onClick={this.deleteCategory}>Delete</button>
          <button className="edit" onClick={this.editCategory}>Edit</button>
        </div>
        <p>To add new category, please enter category name</p>
        <form className="App" onSubmit={this.addCategory}>
          <input value={this.state.term} onChange={this.onChange} />
          <button>{this.state.selectedIndex !== null ? 'Update' : 'Add'}</button>
        </form>
        {this.state.categories.map((category, index) => (
          <button
            key={index}
            style={{ 
              borderColor: this.state.selectedIndex === index ? 'red' : '',
              margin: '0 5px 5px 0',
              padding: '4px 8px'
            }}
            onClick={() => this.setState({ selectedIndex: index })}
          >
            {category}
          </button>
        ))}
      </div>
    );
  }
}

额外优化点： #

• 按钮文本根据是否有选中项切换为"Add"或"Update"，提升用户体验
• 给分类按钮加了一点边距和内边距，视觉上更友好
• 所有操作都增加了选中项检查，避免空操作报错

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