Question

我想使用相同的功能 showHide 来显示/隐藏父项中的每个元素。当我按下按钮时，所有3个方块都会反应并隐藏或显示。如何扩展功能以针对每个div单独工作？这是一个localhost测试项目，因此很遗憾，我无法提供任何链接。 Here you can see the final result

import React, { Component } from 'react';

class Homepage extends Component {  
    constructor( props ){
        super( props )
        this.state = {show : true};
        this.showHide = this.showHide.bind(this)
    }
    render() {
        return (    
            <section id="content">
                <div className="top-content">
                    <div className="container">
                        <h1>React</h1>
                        <h2>A JavaScript library for building user interfaces</h2>
                    </div>
                </div>
                <div className="container">
                    <div>
                        <div>
                            <h3>Declarative</h3>
                            <button onClick={this.showHide} className="button-primary btn">{this.changeName()}</button>
                            { this.state.show && 
                                <div>
                                    <p>text</p>
                                    <p>text</p>
                                </div>
                            }
                        </div>
                        <div>
                            <h3>Component-Based</h3>
                            <button onClick={this.showHide} className="button-primary btn">{this.changeName()}</button>
                            { this.state.show && 
                                <div>
                                    <p>text</p>
                                    <p>text</p>
                                </div>
                            }
                        </div>
                        <div>
                            <h3>Learn Once, Write Anywhere</h3>
                            <button onClick={this.showHide} className="button-primary btn">{this.changeName()}</button>
                            { this.state.show && 
                                <div>
                                    <p>text</p>
                                    <p>text</p>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </section>
      );  
    }
    changeName(){
        let text = "text "
        text += this.state.show === true ? "hide" : "show";
        return text;
    }
    showHide(){
        const { show } = this.state;
        this.setState( { show : !show})
    }
}
export default Homepage;

Answer 1

这里的问题是您为每个div使用了相同的状态变量（this.state.show）。

如果要让div表现不同，则每个div都需要有自己的状态。

import React, { Component } from 'react';

class Homepage extends Component {  
    constructor( props ){
        super( props )
        this.state = {show: [true, true,true]};
    }
    render() {
        return (    
            <section id="content">
                <div className="top-content">
                    <div className="container">
                        <h1>React</h1>
                        <h2>A JavaScript library for building user interfaces</h2>
                    </div>
                </div>
                <div className="container">
                    <div>
                        <div>
                            <h3>Declarative</h3>
                            <button onClick={()->this.showHide(0)} className="button-primary btn">{this.changeName()}</button>
                            { this.state.show[0] && 
                                <div>
                                    <p>text</p>
                                    <p>text</p>
                                </div>
                            }
                        </div>
                        <div>
                            <h3>Component-Based</h3>
                            <button onClick={()->this.showHide(1)} className="button-primary btn">{this.changeName()}</button>
                            { this.state.show[1] && 
                                <div>
                                    <p>text</p>
                                    <p>text</p>
                                </div>
                            }
                        </div>
                        <div>
                            <h3>Learn Once, Write Anywhere</h3>
                            <button onClick={()->this.showHide(2)} className="button-primary btn">{this.changeName()}</button>
                            { this.state.show[2] && 
                                <div>
                                    <p>text</p>
                                    <p>text</p>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </section>
      );  
    }
    changeName(){
        let text = "text "
        text += this.state.show === true ? "hide" : "show";
        return text;
    }
    showHide(num){
        this.setState((prevState) => {
            const newItems = [...prevState.show];
            newItems[num] = !newItems[num];
            return {show: newItems};
        });
    }
}
export default Homepage;

显然，有更好的方法可以做到这一点，但这仅是说明状态分离的一个示例。

目前无法对其进行测试，但应该相距不远。

更新：@Lasitha ty进行了更好的编辑！

显示隐藏带有React的多个元素

1 个答案: