受控组件

class Counters extends Component {
    state = { 
        counters: [
            { id: 1,value: 4 },
            { id: 2,value: 0 },
            { id: 3,value: 0 },
            { id: 4,value: 0 }
        ]
    }
    handleReset = () => {
        const counters = this.state.counters.map(c => {
            c.value = 0;
            return c;
        })
        this.setState({ counters });
    }
    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} counter={counter}/>
                )}
        </div>);
    }
}

class Counter extends Component {
    state = {
        value: this.props.counter.value,
    };
    /* constructor(){
        super();
        this.handleIncrement = this.handleIncrement.bind(this);
    } */
    handleIncrement = (product) => {
        console.log(product);
        this.setState({ value: this.state.value + 1});
    }
    doHandleIncrement = () => {
        this.handleIncrement({ id: 1 });
    }
    render() {
        return (
            <div>
                <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
                <button onClick={this.doHandleIncrement} className='btn btn-secondary btn-sm'>Increment</button>
                <button onClick={() => this.props.onDelete(this.props.counter.id)} className="btn btn-danger btn-sm m-2">Delete</button>
            </div>
        );
    }
    getBadgeClasses() {
        let classes = 'badge m-2 badge-';
        classes += (this.state.value === 0) ? 'warning' : 'primary';
        return classes;
    }

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

我们在顶部添加了一个重置按钮，我们试图通过 handleReset 来重置数据，但是回到浏览器中，我们会发现重置功能并没有实现。这是因为我们没有A single source of Truth(真相的唯一来源）。这里我们面对的，是数据唯一性的问题。每个组件，都有自己的state。
在counter组件中，我们通过 ‘ value: this.props.counter.value ’ 实例化可 state 对象的 value 值，基于它得到的 props 。这行代码只在Counter组件实例创建的时候执行一次，所以当页面加载的时候，我们看到 value 被实例化并可以修改，因为它是本地 state,但是当我们按下重置按钮时，每个 Counter 组件的本地 state 没有更新。

ff.png

那么怎么解决这个问题，我们需要删掉在Counter组件中的本地State，然后建立一个唯一的数据源。
在Counter组件中，我们想删掉Counter组件的State，只保留props来接收组件所需的数据。我们叫这种类型的组件为受控组件。
受控组件没有自己的state,它所有的数据都来自props，之后再数据需要改变时发起事件。这种控件是完全被其父控件控制的。可解决数据不统一的问题。
删除 Counter 组件中的 state：

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={() => this.props.onDelete(this.props.counter.id)} className="btn btn-danger btn-sm m-2">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;
    }
}

我们完全使用 props对象来呈现数据以及处理数据的修改。我们在 Counters 组件中也需要进行相应的改动：

class Counters extends Component {
    state = { 
        counters: [
            { id: 1,value: 4 },
            { id: 2,value: 0 },
            { id: 3,value: 0 },
            { id: 4,value: 0 }
        ]
    }
    handleReset = () => {
        const counters = this.state.counters.map(c => {
            c.value = 0;
            return c;
        })
        this.setState({ counters });
    }
    handleIncrement = counter => {
        const counters = [...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index] = {...counter};
        counters[index].value++;
        this.setState({ counters })
    }
    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}/>
                )}
        </div>);
    }
}

回到浏览器中，我们发现我们已经实现了增加和重置的功能！