Commit 22103e0

committed

written first hook.

1 parent 54b9917 commit 22103e0Copy full SHA for 22103e0

File tree

+12

-2

lines changed

+12

-2

lines changed

Lines changed: 12 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React from 'react';`
	`1`	`+import React,{useState} from 'react';`
`2`	`2`	`import { Input } from 'antd';`
`3`	`3`	`import 'antd/es/input/style/index.css';`
`4`	`4`	`import './App.css';`
`@@ -8,13 +8,23 @@ import './App.css';`
`8`	`8`	`* In short, you can now use state, and other React features, within your functional React components.`
`9`	`9`	`* So, you don’t need a class to use state!`
`10`	`10`	`* The biggest part to learn about hooks is the new way of declaring state. So as the first part of this app, let’s set up a component with state, the hooks way.`
	`11`	`+`
	`12`	`+ ref. https://medium.com/@dtkatz/react-hooks-tutorial-learn-by-building-b90ec4db2b8e`
	`13`	`+`
	`14`	`+`
`11`	`15`	`*/`
`12`	`16`
`13`	`17`	`const App = () => {`
	`18`	`+ const [userText, setUserText] = useState('');`
	`19`	`+ const updateUserText = event => {`
	`20`	`+ setUserText(event.target.value);`
	`21`	+ console.log(`current userText, ${userText}`);
	`22`	`+ }`
	`23`	`+`
`14`	`24`	`return (`
`15`	`25`	`<div className="container">`
`16`	`26`	`<h2>Type something...</h2>`
`17`		`- <Input placeholder="Basic usage"/>`
	`27`	`+ <Input placeholder="Basic usage"onChange={(e)=>updateUserText(e)}/>`
`18`	`28`	`</div>`
`19`	`29`	`)`
`20`	`30`	`}`

Comments

(0)