如何将锚标记样式设置为单击时仍被选中的瓷砖

Question

buttonI需要对锚标记进行样式设置，使其看起来像矩形瓷砖(我已经在这样做)，当单击该瓷砖/锚标记时，我需要做以下两件事：

1. 保持选中并突出显示它的绿色。在选择或更改瓷砖-1、瓷砖-2和瓷砖-3之间的选择时，
2. 需要在输入字段中获取文本的值。

。

有谁能分享一下如何做到这一点的指导方针吗？

 const showTile = (): ReactElement => {
      <ul className="tileList">
        <li>
          <button href="#Tile1" class="tile" >
            TILE-1
          </button >
        </li>
        <li>
          <button  href="#Tile2" class="tile">
            TILE-2
          </button >
        </li>
        <li>
          <button  href="#Tile3" class="tile">
            TILE-3
          </button >
        </li>
      </ul>

  };
  
  const showTextBox = (): ReactElement => {
  <input type="text" value="">
  };

 const [selectedTile, setSelectedTile] = useState("");
 const [textVal, setTextVal] = useState("");
  
  return (<div> {showTile} {showTextBox} </div>);

ul,
li {
  list-style: none;
}

.tileList > li button  {
  color: grey;
  background-colour: yellow;
  border: 1px solid #ffffff;
  padding: 10px 15px;
  font-size: 13px;
}

Answer 1

使用动态类对所选的tie和变量进行赋值和更改值，创建一个2D数组并在其中插入领带值，然后使用一个简单的函数来更改领带值，类似于一个益智应用程序搜索益智函数以查看更多信息。

Answer 2

我就这样解决了。

state ={
  selected: false
}

selectedHandle = () => {
 const {selected} = this.state
   this.setState({selected: true})
}


        <li onClick={() => this.selectedHandle()}>
          <a href="#Tile1"  class={{selected === true ? "active" : "passive"}} >
            TILE-1
          </a>
        </li>

要获取这个值，您可以按照以下问题how to use event.target.value in li