如何在React中单击另一个元素后将className更改为element

Question

点击＆＃34; icon-caret-down＆＃34;后，我必须在第一个div上更改（添加）className。 我的代码不起作用。 你能给我一些提示吗？

＆＃13;

＆＃13;

export default class Nav extends React.Component {
    render() {
      
        var btnClass = classNames({
            'nav-conteiner': true,
            'nav-conteiner-mob': this.state.isPressed           
          });

            return (
           
            <div classNames={btnClass}>
                
                <span className='icon-soundcloud'></span>
                <h6 id="site-name">SoundCloud</h6>
                <span className="icon-caret-down" onClick={this.openSerch.bind(this)}></span>
                <ul>
                    <li><a href='#'>Explore</a></li>
                    <li><a href='#'>Playlist</a></li>
                </ul>
                <Search/>
                
            </div>

        );
    }
    openSerch(){
        console.log('hello');
        this.setState({isPressed:true});
    }
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

我猜你没有宣布初始状态的主要错误。

接下来，您使用了错误的属性“classNames”而不是“className”来包装。

我纠正了错误，检查出来：

export default class Nav extends React.Component {

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

    render () {
        var btnClass = classNames({
            'nav-conteiner': true,
            'nav-conteiner-mob': this.state.isPressed
        });

        return (
            <div className={btnClass}>
                <span className='icon-soundcloud'></span>
                <h6 id="site-name">SoundCloud</h6>
                <span className="icon-caret-down" onClick={this.openSerch.bind(this)}></span>
                <ul>
                    <li><a href='#'>Explore</a></li>
                    <li><a href='#'>Playlist</a></li>
                </ul>
                <Search/>
            </div>
        );
    }

    openSerch () {
        this.setState({ isPressed: true });
    }
}

Answer 2

export default class Nav extends React.Component {
constructor (props) {
    super(props);
    this.state = {
        isPressed: false
    }
}
    render() {
      
        var btnClass = classNames({
            'nav-conteiner': true,
            'nav-conteiner-mob': this.state.isPressed           
          });

            return (
           
            <div classNames={this.state.isPressed ? btnActiveClass :btnClass }>
                
                <span className='icon-soundcloud'></span>
                <h6 id="site-name">SoundCloud</h6>
                <span className="icon-caret-down" onClick={this.openSerch.bind(this)}></span>
                <ul>
                    <li><a href='#'>Explore</a></li>
                    <li><a href='#'>Playlist</a></li>
                </ul>
                <Search/>
                
            </div>

        );
    }
    openSerch(){
        console.log('hello');
        this.setState({isPressed:true});
    }
}