使用 React 添加和刪除 CSS 類

Question

我是 React 的新手。 我在按鈕組中有幾個按鈕：

<div className="btn-group">
    <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type1")} >Button1</button>
    <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type2")} >Button2</button>
    <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type3")} >Button3</button>
</div>

每當用戶單擊其中一個按鈕時，該按鈕應成為活動的、選定的按鈕。 我發現我需要將 CSS 類active添加到相應的按鈕，但我不確定如何實現這一點。

我想了一會兒。 我有一個changeDataType函數連接到我的按鈕，我在其中做一些其他的事情。 那么，我會在那里以某種方式操縱 CSS 嗎？

所以我想我的問題首先是如何定位我需要定位的按鈕，其次是如何使用 React 更改該按鈕的 CSS。

Answer 1

當狀態改變時反應重新渲染。 在您的情況下，如果您想改變某些東西的外觀，那么您可能想要強制進行另一個渲染。 您可以做的是讓className成為 state 的一部分，然后在需要時更新 state，從而使組件使用新的className重新呈現。 例如：

constructor() {
    super();
    this.state = {
        className: 'btn'
    }
}

render () {
    return (
        <Button className={this.state.className}>Click me</Button>
    )
}

由於className綁定到狀態更新狀態將導致按鈕再次使用新的className呈現。 這可以像這樣完成：

updateClass() {
    let className = this.state.className;
    className = className + ' ' + 'btn-primary'
    this.setState({className})
}

這是你可以在點擊按鈕調用和更新功能的示例className的按鈕。

Answer 2

有一個很好的實用程序可以用於類名邏輯 + 將類名連接在一起

https://github.com/JedWatson/classnames

基於為 active 設置 React 狀態，您可以執行以下操作。 您可以根據需要使用邏輯變得復雜。 如果邏輯結果為假，則該鍵將不會包含在輸出中。

var classNames = require('classnames');

var Button = React.createClass({
  // ...
  render () {
    var btnClass = classNames({
      btn: true,
     'btn-active': this.state.isActive
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

Answer 3

這是我如何做到的：

//聊天室頁面組件

function ChatRoomPage() {

 const [showActionDropdown, setShowActionDropdown] = useState('hide');

  function showActionDropdownHandler(){
    console.log("clicked")
    if(showActionDropdown=='hide')
      setShowActionDropdown('show')
    else
      setShowActionDropdown('hide')

  }


 return (

    <div>

           <button onClick={ () => showActionDropdownHandler() } className="btn " type="button">Actions</button>

        <div className={`action_menu ${showActionDropdown}`}>
          ...
        </div>

   </div>
 );

}
export default ChatRoomPage;