反应 - 只有一个＆＃34;活跃＆＃34;任何时候都有儿童成分

Question

我有一个包含许多子组件的父组件。我想在单击子组件时向其添加active className。

这是有效的，但问题是每个子组件都可以有active类名。每次只有一个组件应该active。

有谁知道如何解决这个问题？

请参阅下面的代码。

class MyComponent extends Component {

    constructor(props) {
        super(props);
        this.addActiveClass= this.addActiveClass.bind(this);

        this.state = {
            active: false,
        };
    }

    addActiveClass() {
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };

    render() {
        return (
            <div 
                className={this.state.active ? 'active': null} 
                onclick={this.addActiveClass} 
            >
                <p>{this.props.text}</p>
            </div>
        )
  }
}

class Test extends Component {
    render() {
        return (
            <div>
                <MyComponent text={'1'} />
                <MyComponent text={'2'} />
                <MyComponent text={'3'} />
                <MyComponent text={'4'} />
            </div>
        );
    }
}

Answer 1

将有效功能添加到Test组件。

您可以检查是否已有active组件。

class MyComponent extends React.Component {

    render() {
        return <div 
            id={this.props.id}
            className={this.props.active ? 'active': null} 
            onClick={this.props.handleClick} >
                {this.props.text}
        </div>
  }
}

class Test extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            components: [
                {id: 1, text: 1},
                {id: 2, text: 2},
                {id: 3, text: 3},
                {id: 4, text: 4}
            ],
            activeID: null
        };
    }
    
    handleClick(e) {
        // If there is already active component ID, don't set another one!
        // We support only one active ID.
        if (this.state.activeID !== null) return;
        
        const id = parseInt(e.target.id);
        this.setState({
            activeID: id
        });
    }
    
    renderComponents() {
        return (this.state.components.map( c =>
            <MyComponent
                id={c.id}
                active={c.id === this.state.activeID}
                text={c.text}
                handleClick={this.handleClick.bind(this)} /> ));
    }
    
    renderActiveIDText() {
        return (this.state.activeID ? <p>{"Active Component ID: " + this.state.activeID}</p> : null );
    }

    render() {
        return <div>
            {this.renderActiveIDText()}
            {this.renderComponents()}
        </div>
    }
}

ReactDOM.render(<Test />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>