Question

我制作了一个反应父组件，如果用户点击这两个选项中的一个，则会呈现不同的子组件。

根据选择的选项，我想添加active类。

请参阅下面的代码。

我已经采取了很多方法，但因为我无法理解这个问题而将其剥离了。

class Test extends Component {

    constructor(props) {
        super(props);

        this.state = {
            currentView: 'one'
        };

        this.showOne = this.showOne.bind(this);
        this.showTwo = this.showTwo.bind(this);
    }

    showOne() {
        this.setState({
            currentView: 'one'
        });
    }

    showTwo() {
        this.setState({
            currentView: 'two'
        });
    }

    render(){
    ......
        <p className="one" onClick={this.showOne}>One</p>
        <p className="two" onClick={this.showTwo}>Two</p>
    ......
    }
}

Answer 1

你在找这样的东西吗？

<p className={this.state.currentView === 'one' ? 'one active' : 'one'} onClick={this.showOne}>One</p>
<p className={this.state.currentView === 'two' ? 'two active' : 'two'} onClick={this.showTwo}>Two</p>

将活动类添加到所选项目的反应

1 个答案: