Question

问题

我正在尝试将我的一些jQuery项目转换为使用ReactJS。我想为背景颜色，边框，形状，大小等添加/删除单个类。我希望能够使用许多选项（例如20种颜色）。如果添加背景色，则要删除当前背景色而不删除当前边框，形状或尺寸类别。有没有办法做到这一点？

研究

我已经阅读了许多有关更改悬停按钮，切换班级开/关以及将一个班级换成另一个班级的文章，但是这些文章并没有为我指明正确的方向。

图片

起始代码

import React from 'react';
var classNames = require( 'classnames' );

export class Body extends React.Component {

    render() {

        const red = {
            backgroundColor: "red"
        };
        const gray = {
            backgroundColor: "gray"
        };
        const blue = {
            backgroundColor: "blue"
        };
        const border_red = {
            borderWidth: 3,
            borderColor: "red",
            borderStyle: "solid"
        };
        const border_gray = {
            borderWidth: 3,
            borderColor: "gray",
            borderStyle: "solid"
        };
        const border_blue = {
            borderWidth: 3,
            borderColor: "blue",
            borderStyle: "solid"
        };

        return (
            <div className="App-body">
                <div className="start-shape" style= {border_red} ></div>
                <button className="button" onClick="">bg_Red</button>
                <button className="button">bg_Gray</button>
                <button className="button">bg_Blue</button>
                <button className="button">border_Red</button>
                <button className="button">border_Gray</button>
                <button className="button">border_Blue</button>
            </div>
        );
    }
  }

Answer 1

您在这里：

//intial style
  state = {
    borderWidth: 3,
    borderColor: "red",
    borderStyle: "solid"
  };

// then just update/overwrite with new one
setStyle(new_style) {
    this.setState(state => ({ ...state, ...new_style }));
}

// by click and passing the values
onClick={() => this.setStyle(gray)}

在这里，通过运行代码片段来检查代码：

class App extends React.Component {
  state = {
    borderWidth: 3,
    borderColor: "red",
    borderStyle: "solid"
  };

  setStyle(new_style) {
    this.setState(state => ({ ...state, ...new_style }));
  }

  render() {
    const red = {
      backgroundColor: "red"
    };
    const gray = {
      backgroundColor: "gray"
    };
    const blue = {
      backgroundColor: "blue"
    };
    const border_red = {
      borderWidth: 3,
      borderColor: "red",
      borderStyle: "solid"
    };
    const border_gray = {
      borderWidth: 3,
      borderColor: "gray",
      borderStyle: "solid"
    };
    const border_blue = {
      borderWidth: 3,
      borderColor: "blue",
      borderStyle: "solid"
    };

    return (
      <div className="App-body">
        <div className="start-shape" style={this.state} />
        <button className="button" onClick={() => this.setStyle(red)}>
          bg_Red
        </button>
        <button className="button" onClick={() => this.setStyle(gray)}>
          bg_Gray
        </button>
        <button className="button" onClick={() => this.setStyle(blue)}>
          bg_Blue
        </button>
        <button className="button" onClick={() => this.setStyle(border_red)}>
          border_Red
        </button>
        <button className="button" onClick={() => this.setStyle(border_gray)}>
          border_Gray
        </button>
        <button className="button" onClick={() => this.setStyle(border_blue)}>
          border_Blue
        </button>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('react-root'));

.start-shape {
  padding : 50px;
  width: 50px;
}

.button {
  display: inline-block;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

Answer 2

因此，您需要了解onClick事件应该更改组件的state。

要添加状态，请向constructor中添加一个带有initialState的class：

constructor(props){
  super(props);
  this.state = {
    style: {}
  }
}

然后，您需要添加一个函数来处理click事件，该函数将设置下一个状态：

handleOnClick = (style) => {
    // style = { <css properties>}
    this.setState({style})
}

既然您的点击处理程序和状态已经到位，您只需要使用所需的下一个状态调用click事件上的处理程序即可。

<button className="button" onClick={()=>handleOnClick(bg_Red)}>bg_Red</button>

最后，将div的最新状态绑定为：

<div className="start-shape" style={this.state.style} ></div>

React：从div onClick删除/添加类w /多个按钮/类

问题

研究

图片

更多详细信息

起始代码

2 个答案: