Question

在此测验选择组件中，我将两个不同的带有按钮的div引导程序列表组放入。当我单击某个按钮时，我想保持活动类，但每个div中只有其中一个可以活动。因此，例如，如果我单击“历史记录”，然后单击“中级”，我希望他们保持活动状态。

我尝试添加一些引导4选项，例如“活动状态”，并尝试切换活动类onClick。但是通过这种方式，活动班级仍然停留在我单击的每个按钮中。

非常感谢您的帮助

class Selection extends React.Component {
  render() {
    return (
      <div className="border rounded w-75 mx-auto">
        <div className="row pt-4">
          <div className="col-6">
            <div
              onClick={this.props.chooseCategory}
              className="list-group w-75 ml-auto"
            >
              <p>Choose a category</p>
              <button
                type="button"
                className="list-group-item list-group-item-action" active
              >
                Mix
              </button>
              <button
                type="button"
                className="list-group-item list-group-item-action"
              >
                Sports
              </button>
              <button
                type="button"
                className="list-group-item list-group-item-action"
              >
                History
              </button>
              <button
                type="button"
                className="list-group-item list-group-item-action"
              >
                Movies
              </button>
              <button
                type="button"
                className="list-group-item list-group-item-action"
              >
                Geography
              </button>
            </div>
          </div>
          <div className="col-6">
            <div
              className="list-group w-50 mr-auto"
              onClick={this.props.chooseDifficulty}
            >
              <p>Choose the difficulty</p>
              <button
                type="button"
                className="list-group-item list-group-item-action active"
              >
                Easy
              </button>
              <button
                type="button"
                className="list-group-item list-group-item-action"
              >
                Medium
              </button>
              <button
                type="button"
                className="list-group-item list-group-item-action"
              >
                Hard
              </button>
            </div>
          </div>
        </div>
        <button
          onClick={this.props.handleStart}
          className="btn btn-outline-primary my-4"
        >
          START
        </button>
      </div>

Answer 1

使用状态显示活动的div元素

div的

onClick可使状态为true

<div>
{this.state.active ? <div><button1><div> : <div><button2></div>}
</div>

Answer 2

向组件添加状态，以表示活动选择的类别和难度。

即（在构造函数中） this.state = { category: 'Mix', difficulty: 'Easy' }

稍后，您可以使用if或内联三元语句检查render函数中的内容。我还将创建一个表示选项的数组，并使用array.map（）缩短代码。

const categoryOptions = [ 'Mix', 'Sports', 'History']

（在渲染功能中，而不是手动添加所有这些按钮...）

{ categoryOptions.map(category => (
    <button
         type="button"
         className={`list-group-item list-group-item-action $(this.state.category === category ? 'active' : '')`}
         onClick=(() => this.setState({category: category}))
    >
    {category}
    </button>
)) }

onClick会更改状态以表示活动元素，只有选择了该类别后，活动类才会有条件地显示。

我不想把这个答案误入歧途，但是进一步的增强将是使用带有最新版本的React的带有功能组件的React useState钩子。

如何保持按钮的选择活动状态？

2 个答案: