Question

一个简单的React应用程序。可以使用“增量”按钮添加新项目。还为每个计数器添加了删除按钮。我正在尝试添加一个重置按钮，但是它不起作用。我认为handlereset函数有问题。请看一下以帮助我解决错误。我已经创建了2个js文件。 counter.js和counters.js

//counter.js



import React, { Component } from 'react'

class Counter extends Component {      
    render() { 
    return (
    <div>
    <span className={this.getBadgeClasses()}>     {this.formatCount()}</span>
    <button onClick = {() => this.props.onIncrement(this.props.counter)}
    className="btn btn-secondary btn-sm">
    Increment
    </button>
    <button onClick = {(counterId) =>this.props.onDelete(this.props.counter.id)} 
    className="btn btn-danger btn-sm">
    Delete
    </button>
    </div>
    );
    }
    getBadgeClasses(){
        let classes = "badge m-2 badge-";
        classes += this.props.counter.value === 0 ? "warning" : "primary";
        return classes;
    }

    formatCount(){
    const {value} = this.props.counter;
    return value === 0 ? "Zero" : value;
}
} 
export default Counter;




   // counters.js



import React, { Component } from 'react'
import Counter from './counter';

class Counters extends Component {
    state = { 
        counters : [
            { id: 1, value: 4},
            { id: 2, value: 0},
            { id: 3, value: 0},
            { id: 4, value: 0}
        ]
     }

     handleIncrement = (counter) =>{
         const counters = [...this.state.counters];
         const index = counters.indexOf(counter);
         counters[index] = { ...counter };
         counters[index].value++;
         this.setState({ counters });
     };

     handleReset = () => {
        this.state.counters.map(c => {
            c.value = 0;
            return c;
        });
    }

     handleDelete = (counterId) =>{
         const counters = this.state.counters.filter(c => c.id !== counterId)
         this.setState({counters});
     }
    render() { 
        return ( 
            <div>
                <button
                onClick={this.handleReset}
                className="btn btn-primary btn-sm m-2">
                Reset
                </button>
                {this.state.counters.map(counter => 
                <Counter  key = {counter.id} 
                onDelete = {this.handleDelete}
                onIncrement = {this.handleIncrement} 
                counter = {counter}>
    
                </Counter>
                )}
            </div>
         );
    }
} 
export default Counters;



//Index.js


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import Counters from './components/counters';

ReactDOM.render(<Counters />, document.getElementById('root'));
registerServiceWorker();

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
  
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
 
  </body>
</html>

Answer 1

您的handleReset不执行任何操作，map返回一个数组，您需要使用setState将其放回状态

handleReset = () => {
    const counters = this.state.counters.map(c => {
        c.value = 0;
        return c;
    });
    this.setState({counters});
}

ReactJs中单一真相来源的实现

1 个答案: