File tree Expand file tree Collapse file tree 6 files changed +2
-85
lines changed Expand file tree Collapse file tree 6 files changed +2
-85
lines changed Original file line number Diff line number Diff line change 2626 display : flex ;
2727 flex-direction : column ;
2828 align-items : center ;
29- .todoBody {
30- padding : 50px ;
31- background-color : #66CCFF ;
32- font-family : sans-serif ;
33- }
34- .todoListMain .todoHeader input {
35- padding : 10px ;
36- font-size : 16px ;
37- border : 2px solid #FFF
38- }
39- .todoListMain .todoHeader button {
40- padding : 10px ;
41- font-size : 16px ;
42- margin : 10px ;
43- background-color : #0066FF ;
44- color : #FFF ;
45- border : 2px solid #0066FF ;
46- }
47- .todoListMain .todoHeader button :hover {
48- background-color : #003399 ;
49- border : 2px solid #003399 ;
50- cursor : pointer ;
51- }
5229 }
5330}
5431
Original file line number Diff line number Diff line change 11import React , { Component } from 'react' ;
2- import TodoItems from './TodoItems.js' ;
32
43export default class Content extends Component {
5- constructor ( props ) {
6- super ( props ) ;
7- this . state = {
8- text : "" ,
9- item : [ ]
10- } ;
11- this . handleChange = this . handleChange . bind ( this ) ;
12- }
13- handleChange ( event ) {
14- console . log ( event . target . value ) ;
15- this . setState ( { text : event . target . value } ) ;
16- }
17- handleAdd ( ) {
18- const itemArray = this . state . items ;
19- itemArray . push (
20- {
21- text : this . state . text ,
22- }
23- ) ;
24- this . setState ( {
25- item : itemArray
26- } ) ;
27- this . setState ( { text : "" } ) ;
28- console . log ( this . state . items ) ;
29- }
304 render ( ) {
315 return (
326 < div className = "content" >
33- < div className = "todoBody" >
34- < div className = "todoListMain" >
35- < div className = "todoHeader" >
36- < input
37- type = "text"
38- value = { this . state . text }
39- onChange = { this . handleChange }
40- />
41- < button onClick = { this . handleAdd } > add </ button >
42- < TodoItems entries = { this . state . item } />
43- </ div >
44- </ div >
45- </ div >
7+ < h1 > Hello, We are ReactMaker!</ h1 >
8+ < h2 > This is Content Component!</ h2 >
469 </ div >
4710 ) ;
4811 }
Load Diff This file was deleted.
You can’t perform that action at this time.
0 commit comments