时间戳

首页 > 解决方案 > onClick 后渲染组件

javascript - onClick 后渲染组件

问题描述

我想在单击按钮后呈现我的数据。我在组件中使用条件渲染并在状态对象中创建一个布尔变量。更改按钮单击变量并且（如我所料）我的数据被渲染后。但什么也没有发生。我知道这是一个基本错误。

class SortingMyArray extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            addcomments: addcomments,
            isClicked : false
        }

     //   this.sortBy = this.sortBy.bind(this)
    }

    sortBy() {
            let sortedComments = [...this.state.addcomments].sort((a,b) => new Date(b.date) - new Date(a.date));
            this.setState({
            addcomments: sortedComments,
            isClicked : true
           })
            console.log(this.state.isClicked)
    }

  render(){
            return(
                  <div>
                        <div>
                           <button
                           onClick={() => this.sortBy() }>AdditionalCommentaries
                           </button>
                        </div>
                  </div>
                )
            if (this.state.isClicked){
                return(
                    <div>
                            <div>
                             <AddComments addcomments = {this.state.addcomments} />
                            </div>
                    </div>
                )
            }

            }
}

export default SortingMyArray;

标签： javascriptreactjsonclick

解决方案

在 render 方法中不应有多个返回。而是试试这个：

注意：JSX 中没有 if-else 语句，但我们使用下面的语句

render(){
    return(

        <div>
            <div>
                <button
                    onClick={() => this.sortBy() }>AdditionalCommentaries
                </button>
            </div>
        </div>
        {
            this.state.isClicked
            &&
            <div>
                <div>
                    <AddComments addcomments = {this.state.addcomments} />
                </div>
            </div>
        }
    )
}

推荐阅读