React实现锚点标签Tile化样式及点击选中与输入值获取方案

针对你的需求，这里给出修正后的完整实现，同时解决两个功能点：

关键调整点 #

• 修复组件渲染：showTile和showTextBox作为返回JSX的函数，必须显式添加return
• 替换class为className：React中元素的类名属性是className，而非原生HTML的class
• 绑定点击事件：给每个Tile按钮添加点击事件，处理选中状态切换，同时在切换时获取当前输入框的值
• 动态样式控制：根据selectedTile状态，给选中的按钮添加高亮样式类
• 输入框双向绑定：给输入框绑定textVal状态和onChange事件，实时同步输入内容

完整代码实现 #

import { useState } from 'react';

const YourComponent = () => {
  const [selectedTile, setSelectedTile] = useState("");
  const [textVal, setTextVal] = useState("");

  // 处理Tile点击事件
  const handleTileClick = (tileId) => {
    // 切换选中状态时，获取当前输入框的值
    console.log("当前输入框值：", textVal);
    // 更新选中的Tile
    setSelectedTile(tileId);
  };

  const showTile = () => {
    return (
      <ul className="tileList">
        <li>
          <button 
            className={`tile ${selectedTile === "Tile1" ? "selected" : ""}`}
            onClick={() => handleTileClick("Tile1")}
          >
            TILE-1
          </button>
        </li>
        <li>
          <button 
            className={`tile ${selectedTile === "Tile2" ? "selected" : ""}`}
            onClick={() => handleTileClick("Tile2")}
          >
            TILE-2
          </button>
        </li>
        <li>
          <button 
            className={`tile ${selectedTile === "Tile3" ? "selected" : ""}`}
            onClick={() => handleTileClick("Tile3")}
          >
            TILE-3
          </button>
        </li>
      </ul>
    );
  };

  const showTextBox = () => {
    return (
      <input 
        type="text" 
        value={textVal}
        onChange={(e) => setTextVal(e.target.value)}
        placeholder="输入内容..."
      />
    );
  };

  return (<div> {showTile()} {showTextBox()} </div>);
};

export default YourComponent;

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tileList > li {
  display: inline-block;
  margin-right: 10px;
}

.tile {
  color: grey;
  background-color: yellow; /* 修正原代码拼写错误：background-colour → background-color */
  border: 1px solid #ffffff;
  padding: 10px 15px;
  font-size: 13px;
  cursor: pointer;
}

/* 选中状态的高亮样式 */
.tile.selected {
  background-color: green;
  color: white;
}

代码说明 #

1. 选中状态高亮：通过className动态拼接selected类，当selectedTile匹配当前Tile的ID时，应用绿色背景的高亮样式
2. 切换时获取输入值：在handleTileClick函数中，每次点击切换Tile时，直接读取textVal状态的值（你可以根据需求替换为接口调用、存储等操作）
3. 输入框双向绑定：通过value和onChange实现输入内容与textVal状态的实时同步
4. 修复原代码问题：修正了CSS中background-colour的拼写错误，添加了列表的基础样式，确保Tile横向排列

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