时间戳

首页 > 解决方案 > 当我单击 React 中的按钮时，如何保持多个按钮的边框发生变化？

css - 当我单击 React 中的按钮时，如何保持多个按钮的边框发生变化？

问题描述

首先，感谢您帮助我！当我喜欢按钮时，我试图通过使用焦点和活动来更改按钮边框颜色

button {
            margin: 5px;
            width: 44px;
            height: 32px;
            background-color: white;
            border: 1px solid silver;
            border-radius: 15%;

            &:active,
            &:focus {
              border: 1px solid black;
            }

但是，当我单击一个按钮时，它也会更改按钮的边框颜色。但是，当我单击另一个按钮时，它会更改边框颜色，但第一次单击的按钮边框会更改为原来的。这意味着我只能更改其中一种按钮的边框颜色。如何保留几个按钮的边框颜色，此外，当我重新单击同一个按钮时，我想将其更改为原始颜色。

在此处输入图像描述

如上图，我只能更改一个按钮边框颜色。

updateSize = e => {
    const { history, location } = this.props;
    const name = e.currentTarget.value;

    const currentQueryString = location.search;
    const url = new URLSearchParams(currentQueryString);

    const isSizeExist = url.getAll('size').includes(name);

    if (isSizeExist) {
      filterSizeExist();
    } else {
      filterSizeNotExist();
    }

    applyQueryStringToURL();
    function filterSizeExist() {
      const sizes = url.getAll('size');
      const isCertainSizeExist = sizes.includes(name);

      if (isCertainSizeExist) {
        const filteredSizes = sizes.filter(size => size !== name);

        url.delete('size');
        filteredSizes.forEach(size => url.append('size', size));
      }
    }

    function filterSizeNotExist() {
      url.append('size', name);
    }

    function applyQueryStringToURL() {
      const qs = url.toString();
      const query = `${url.toString() ? '?' : ''}` + qs;

      history.push('/products' + query);
    }
    this.setState({ selectedItemSize: url.getAll('size') });
  };

<div className="sizes">
              <div className="HorizontalLine" />
              <span>사이즈&lt;/span>
              <div className="sizeLists">
                <button onClick={this.updateSize} value="230" key="1">
                  230
                </button>
                <button onClick={this.updateSize} value="235" key="2">
                  235
                </button>
                <button onClick={this.updateSize} value="240" key="3">
                  240
                </button>
                <button onClick={this.updateSize} value="245" key="4">
                  245
                </button>
                <button onClick={this.updateSize} value="250" key="5">
                  250
                </button>
                <button onClick={this.updateSize} value="255" key="6">
                  255
                </button>
                <button onClick={this.updateSize} value="260" key="7">
                  260
                </button>
                <button onClick={this.updateSize} value="265" key="8">
                  265
                </button>
                <button onClick={this.updateSize} value="270" key="9">
                  270
                </button>
                <button onClick={this.updateSize} value="275" key="10">
                  275
                </button>
                <button onClick={this.updateSize} value="280" key="11">
                  280
                </button>
              </div>
              <div className="HorizontalLine" />
            </div>

标签： cssreactjssass

解决方案

如果我是对的，你想做类似的事情：

  1. 如果我单击它们一次，使边框处于活动状态
  2. 当我再次点击它们时删除边框
  3. 保持边界，直到我再次点击它们

所以，

  1. 使用一个useState()和一个布尔值（处理点击事件）
  2. 每当有人单击btn一次或两次时，分别更改布尔值。
  3. 使用if条件，如果布尔值为真，className = 'bordered'否则''

希望你有这个想法！, 我想说什么。

推荐阅读