添加

Question

我是新来的反应。我有几个按钮在按钮组：

<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

我是如何做到这一点的：

//聊天室页面组件

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;

Answer 2

有一个很好的实用程序，你可以用它来连接类名逻辑

https://github.com/JedWatson/classnames

基于为活动设置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

在反应状态变化时再进行反应渲染。在你的情况下，如果你想改变一些东西的外观，那么你可能想强制另一个渲染。您可以做的是让class Name成为状态的一部分，然后在需要时更新状态，使组件使用新的class Name重新呈现。例如：

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

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

由于类名绑定到状态，更新状态将导致按钮使用新的类名再次呈现。可以这样做：

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

这是一个函数示例，您可以在单击按钮时调用该函数并更新该按钮的class Name。