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

Question

I have to change(add) className on the first div, after click on "icon-caret-down". My code doesn't work. Can you give me some tips?

 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}); } } 

Answer 1

I guess the main error that you didn't announce initial state.

The next thing, that you used wrong attribute "classNames" instead "className" to wrapper.

I corrected mistakes, check it out:

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}); } }