單擊React中的另一個元素后如何將className更改為元素

Question

單擊“ icon-caret-down”后，我必須在第一個div上更改（添加）className。 我的代碼不起作用。 你能給我一些提示嗎？

 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

我猜主要的錯誤是您沒有宣布初始狀態。

接下來，您對包裝器使用了錯誤的屬性“ 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}); } }