Question

我有两个组件Class和Students。 Class组件呈现并返回<li>中的类列表。我想添加点击事件，以显示Class组件中每个班级的学生。

我在Class组件的render方法中有以下内容：

    render(){
        const renderClasses = () => 
            this.props.classes.map(class => {
                return (
                    <li>
                        <a href="#">{class.name}</a>
                     //class object also has a property of 'students'
                    </li>
                )
        })

        return(
            <div>
                { renderClasses() }
            </div>
        )
    }

我希望能够点击锚标签并显示该班级的相应学生。当然学生组成部分应该得到如下支柱：

<Students students={this.class.students} />

提前致谢！

Answer 1

您可以保留组件state以保存应显示其学生的class index，然后在锚点上添加onClick处理程序以更改index 1}}。

尝试以下代码：

export default class Test extends Component {
    constructor(props)
    {
        super(props);
        this.state = {activeClassIndex : -1}
        this.setActiveClassIndex = this.setActiveClassIndex.bind(this);
    }

    setActiveClassIndex(index){
        this.setState({
            activeClassIndex : index
        })
    }


     render(){
        const renderClasses = () =>
            this.props.classes.map( ( currentClass , index ) => {
            return (
                <li>
                    <a href="#" onClick={ () => { this.setActiveClassIndex(index) } }>{currentClass.name}</a>
                    {this.state.activeClassIndex == index ? <Students students={currentClass.students} /> : "" }
                </li>
            )
        })

        return(
            <div>
                { renderClasses() }
            </div>
        )
    }
}

在父组件中单击创建并返回新组件

1 个答案: