1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- import React, { Component } from "react";
- import {
- Platform,
- StyleSheet,
- Text,
- View
- } from "react-native";
- import Header from "./header";
- import Footer from "./footer";
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: "#F5F5F5",
- ...Platform.select({
- ios: {
- paddingTop: 30
- }
- })
- },
- content: {
- flex: 1
- }
- });
- class App extends Component {
- constructor(props) {
- super(props);
- this.state = {
- allComplete: false,
- items: [],
- value: ""
- };
- this.handleAddItem = this.handleAddItem.bind(this);
- this.handleToggleAllComplete = this.handleToggleAllComplete.bind(this);
- }
- handleAddItem() {
- if (!this.state.value) {
- return;
- }
- const newItems = [
- ...this.state.items,
- {
- key: Date.now(),
- text: this.state.value,
- complete: false
- }
- ];
- this.setState({
- items: newItems,
- value: ""
- });
- }
- handleToggleAllComplete() {
- const complete = !this.state.allComplete;
- const newItems = this.state.items.map((item) => ({
- ...item,
- complete
- }));
- console.table(newItems);
- this.setState({
- allComplete: complete,
- items: newItems
- });
- }
- render() {
- console.log(this.state);
- return (
- <View style={styles.container}>
- <Header
- onAddItem={this.handleAddItem}
- onChange={(value) => this.setState({ value })}
- onToggleAllComplete={this.handleToggleAllComplete}
- value={this.state.value}
- />
- <View style={styles.content} />
- <Footer />
- </View>
- );
- }
- }
- export default App;
|