react

Posted 2021-11-04 马如林

react antd pro

 

import React, { useState } from 'react'



function Child({ onButtonClick, data }) {

console.log('Child Render', data)

return (

<button onClick={onButtonClick}>{data.name}</button>

)

}



const AddCount = () => {

// const [ count, setCount ] = useState(0)

const [count, setCount] = useState(() => {

return 11;

}

)

const [number, setNumber] = useState(0)

const [name, setName] = useState('hello') // 表单的值

const data = { number, name }



const addcount = () => {

let newCount = count

setCount(newCount += 1)

}



function handleClick() {

setCount(count + 2)

}



function handleClickFn() {

setCount((prevCount) => {

return prevCount + 3

})

}



function handleClickFn2() {

console.log("test")

setTimeout(() => {

setCount((prevCount) => {

return prevCount + 1

})

}, 3000);

}



const addClick = () => setNumber(number + 1)



return (

<div>

<p>{count}</p>

<button onClick={addcount}>count++</button>

<button onClick={handleClick}>count2++</button>

<button onClick={handleClickFn}>count3++</button>

<button onClick={handleClickFn2}>countf++</button>



<input type="text" value={name} onChange={e => setName(e.target.value)} />

<Child onButtonClick={addClick} data={data} />

</div>

)

}

export default AddCount