Question

我在其他文件中的任务很少，我将其注入此文件，之后我创建showButton function只更改state，然后我showButtonNow function，显示我点击了一个按钮和任务。假设我点击吃晚餐会显示我吃晚餐而不是一个编辑按钮

当我点击一次它工作正常时，让我说我的任务是吃晚餐，它会显示我吃晚餐，而不是它会显示编辑按钮。我的问题是，当我第二次点击时，它应该再显示一次吃晚餐和一个“编辑”按钮，它不会这样做。

然后我添加了console.log只是检查，在console.log中，它确实添加了，假设我点击三次吃晚餐，它会显示我是的，我点击了三次，它也会向我显示状态三次，这一切都将成为现实。

我做错了什么？

import React from 'react';

export default class Header extends React.Component
{
    constructor(props){
        super(props);
        this.state={showButton:false}
    }

    showButton(){
        this.setState({showButton:true})
    }

    showButtonNow()
    {
        if(this.state.showButton){
        return(
        <div>
        <h1>{this.props.task}</h1>
        <button>Edit</button>

        </div>);}
    }
    render(){
        const style = {cursor:'pointer'}
        console.log(this.props.task)
        console.log(this.state)
        return(
        <div>
        <div style={style}
        onClick={this.showButton.bind(this)}>
        {this.props.task}
        </div>
        <div>
        {this.showButtonNow()}
        </div>
        </div>
        );
    }
}

Answer 1

所以你总是只会显示一个按钮，因为虽然该函数每次重新渲染都会运行一次，它只能执行你告诉它要做的事情，如果state.showButton是显示一个div的话真。

我要做的是在你的showButton方法中我将showButtonNow（）中的div添加到你所处状态的数组中，然后在你的渲染方法中你可以迭代该数组并显示所有按钮。 / p>

var test = '((1 < 2 || 2 < 1) && 1 < 0)';
console.log(new Boolean(new Function(`return ${test}`)()));

Answer 2

在我原来的问题中，我想显示点击次数，但实际上我只想显示，如果我点击三次吃晚餐，它应该让我失望

吃晚餐

如果您希望三次显示吃晚餐和按钮，只需运行任何循环，它将完成工作，我从这里得到答案http://jsfiddle.net/arfyasu/h95teu70/

import React from 'react';

export default class Header extends React.Component
{
    constructor(props){
        super(props);
        this.state={showButton:false, click:0}//Added a click state to count click
    }

    showButton(){
        this.setState({showButton:true, click:this.state.click+1})// Change the value of click according to the click
    }

    showButtonNow()
    {
        if(this.state.showButton){
        return(

        <div>
        <h1>{this.state.click}{this.props.task}</h1>//Added state for click so i can display the click count
        <button>Edit</button>

        </div>);}
    }
    render(){
        const style = {cursor:'pointer'}
        console.log(this.props.task)
        console.log(this.state)
        return(
        <div>
        <div style={style}
        onClick={this.showButton.bind(this)}>
        {this.props.task}
        </div>
        <div>
        {this.showButtonNow()}
        </div>
        </div>
        );
    }
}

如何根据点击次数添加项目？

2 个答案: