javascript - 如何保持按钮的选择事件状态？

Question

在此测验选择组件中，我放置了两个带有按钮的不同 div 引导列表组。当我单击某个按钮时，我想保留事件类，但每个 div 中只有其中一个可以事件。例如，如果我单击“历史”，然后单击“中”，我希望它们保持活跃状态​​。

我尝试添加一些 bootstrap 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

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

即(在构造函数中) this.state = { 类别:'混合'，难度:'简单' }

稍后在渲染函数中，您可以使用 if 或内联三元语句进行检查。我还将创建一个表示选项的数组，并使用 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 useState 钩子(Hook)和功能组件，来自最新版本的 React。