Question

我打算做出反应“在线购物车”模板。但是，我不知道当“计数”达到零时如何隐藏“计数器”元素

我设法制作了一个单独的按钮，该按钮在单击时隐藏了元素，但这不适合该项目。

counter.jsx

import React, { Component } from 'react';
import Counters from './counters';

class Counter extends Component {
   state = {
       count: 1
   };


handleIncrement = () => {
    this.setState({count: this.state.count + 1});
}

handleDelete = () => {
    this.setState({count: this.state.count - 1});
    if (this.state.count == 0) {
        this.state.counters = {
            isHidden: true
        }
    }
}


render() { 

    let classes = 'badge m-2 badge-';
    classes += this.state.count === 1 ? 'primary' : 'primary';

    return ( 
        <div>
            <span className={classes}>{this.formatCount()}</span>
            <button onClick={() => this.handleIncrement()} className='btn btn-primary m-2'>+</button>
            <button onClick={() => this.handleDelete()} className="btn btn-danger m-2">-</button>
        </div>
     );
}

formatCount() {
    const {count} = this.state;
    return count === 0 ? 'Reached' : count;
}

}

export default Counter;

counters.jsx

import React, { Component } from 'react';
import Counter from './counter';

class Counters extends Component {
    state = {  
       counters: [
          { id: 1, value: 1 },
          { id: 2, value: 1 },
          { id: 3, value: 1 },
          { id: 4, value: 1 }
      ]
   }


render() { 
    return ( 
    <div>
        {this.state.counters.map(
            counter => (
                <Counter key={counter.id} value={counter.value} id={counter.id} />
        ))}
    </div> 
    );
}
}

export default Counters;

因此，当按下删除按钮时，它应该从1变为0，而当达到零时，计数器元素应该消失（基于ID）。

Answer 1

正如Joe在评论中提到的，您正在直接改变状态，这是非常反模式的。始终使用setState()。

此外，每当您设置依赖于先前状态变量的新状态时，都将回调传递给setState()而不是对象。在某些情况下，这可以为您节省一些头痛。

handleDelete = () => {
  this.setState(prevState => ({
    count: prevState.count - 1,
    isHidden: prevState.count === 1 // Hide if we are decreasing count from 1 to 0
  }));
}

Answer 2

将计数器保留为无状态组件。将计数器状态存储在Counters组件本身中。将增量，减量功能移至“计数器”组件。在递减函数中，编写逻辑，使其在达到0时从this.state.counters中删除相应的计数器对象。

Answer 3

当this.state.coun为0时，您还可以从counter.jsx中的null方法返回render()

Answer 4

您应该重新开发handleDelete方法。这是可能的版本

handleDelete =（）=> { 让currentCount = this.state.count-1;

@Pipe({name: 'sorted'})
export class SortedPipe implements PipeTransform {
  transform(value: any){
    const data =  value.sort((a,b) => a.municipality.localeCompare(b.municipality));
    return data;
  } 
}

}

Answer 5

一般来说，https://stackoverflow.com/a/54649508/10868273答案应该是前进的方向，但是为了不作太多改变，可以尝试一下（我只包括了要更改的内容）

counter.jsx


handleIncrement = () => {
    this.setState((state) => ({
        count: state.count + 1
    }));
}

handleDelete = () => {
    this.setState((state) => ({
        count: state.count - 1
    }),() => {
        if (this.state.count <= 0){
            this.props.handleCounterRemove(this.props.id);
        }
    });
}

Counters.jsx


import React, { Component } from 'react';
import Counter from './counter';

class Counters extends Component {
    state = {  
       counters: [
          { id: 1, value: 1 },
          { id: 2, value: 1 },
          { id: 3, value: 1 },
          { id: 4, value: 1 }
      ]
    }
    handleCounterRemove = (counterId) =>{
        const { counters } = this.state;
        this.setState((state)=> ({
            counters: state.counters.filter(counter => counter.id !== counterId)
        }));

    }

    render() { 
        return ( 
        <div>
            {this.state.counters.map(
            counter => (
                <Counter key={counter.id} value={counter.value} id={counter.id} handleCounterRemove={this.handleCounterRemove} />
            ))}
        </div> 
        );
    }
}

export default Counters;

正如其他答案中提到的那样，如果下一个值取决于先前的值，则您不希望仅调用setState：您可以在此处React SetState documentation

了解更多信息

另外，请注意handleCounterRemove组件中Counters的引入，这就像子组件可以影响其父组件的唯一方式一样

达到特定值时如何隐藏反应元素？

5 个答案: