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吗？

所以我猜我的问题首先是，如何定位我需要定位的按钮，以及 second ，我如何使用React更改该按钮的CSS。

Answer 1

当状态变化反应重新呈现时做出反应。在您的情况下，如果您想要改变外观的方式，那么您可能想要强制另一个渲染。您可以做的是让className成为状态的一部分，然后在需要时更新状态，从而使组件使用新的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

有一个很好的实用程序可用于类名逻辑+一起加入classNames

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

这是我的操作方式：

// ChatRoomPage组件

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;

添加＆amp;使用React删除CSS类

3 个答案: