反応状態とイベントの処理

handling Events

reactのすべてのイベントはonで開始され、関数が値として必要です.
次の例ではonClickイベントを使用します.
この場合、JSX内部で匿名関数を使用するよりも、個別定義関数を使用する方が簡潔で良い.

function App(){
	const clickHandler = () => {
    	console.log("clicked")
    }
    return (
    <button onClick(clickHandler)>click button</button>
        )
}

useState()

function App(){
	let title = "title"
    const clickHandler=()=>{
    	title = "update"
    }
    return(
    	<>
        	<div>{title}</div>
            <button onClick={clickHandler}>click</button>
        </>
    )
}

上のコードは、ボタンをクリックしたときにtitle値の表示を変更するコードです.
ただし、ボタンをクリックしても、変更したtitle値ではなく、予想とは異なる既存の「title」値しか表示されません.
このような原因は反応の開始方式にある.
初めて素子を評価すると、素子の変数が変化しても再評価して無視しないので、title変数が変化しても素子は変化しません!!😨
では、反応器に素子を再評価するにはどうすればいいのでしょうか.
useStateを使用します.
useStateを使用して構成部品の内部状態を変更すると、反応器は構成部品を再評価します.
useState:

title:ステータス変数名、

settitle:title変数の値

を更新

ユーザ状態(「title」):初期値

const [title,setTitle] = useState("title")

useStateを使用してコードを記述する場合(次のコードに示す)、titleを変更するたびにコンポーネントが再評価され、title変更の値が表示されます.

function App(){
	const [title,setTitle] = useState('title')
    const clickHandler = () => {
    	setTitle('update')
    }
	return (
    	<div>{title}</div>
        <button onClic={clickHandler}>button</button>
    )
}

また、Reactは、変数(ここではtitle)をレンダリングするときにその変数を記憶し、最近更新された値を提供します.

複数のステータスの処理

方法複数のuseStateの使用

function App(){
	const [title,setTitle] = useState('')
    const [amount,setAmount] = useState('')
}

方法userStateの初期値をオブジェクトとして保存

これでstateを保存して複数のstateを同時に保存できます...なお、stateを変更する場合、他のstateも展開演算子でコピーする必要があります.

function App(){
	const [userInput,setUserInput] = useState({
    	title : '',
        amount : ''
    })
    
    const changeHandler = (event) => {
    	setUsetInput({...userInput, amount : event.target.value})
    }
}

しかしこのように更新すると,更新状態のたびに以前の状態に依存する.
ほとんどの場合問題はありませんが、同時に多くのステータスが更新されている場合は問題が発生します.
応答のステータス更新はすぐには発生しないため、エラーのステータスsnapshotに依存する可能性があります.
したがって,上記のコードのように,以前の状態に依存する状態更新については,最も以下のように更新する.
次の図に示すように、応答プログラムは常に最新のステータススナップショットを提供するため、問題は発生しません.

const [userInput,setUserInput] = useState({
    	title : '',
        amount : ''
    })
    
    const changeHandler = (event) => {
    	setUsetInput((prevState)=>{
        	...prevState , amount : event.target.value
        })

子コンポーネントから親コンポーネントへの通信(上向き)

次の図のように、Expense構成部品とNew Expense構成部品のデータ交換は要約できません.
この場合、データを交換するために、共通の親コンポーネントからデータを受信できます!New ExpenseコンポーネントからAppコンポーネントにデータを送信する方法

これは、親コンポーネントから子コンポーネントにデータを送信する方法と似ています.
次のコードに示すように、親コンポーネントAPPからpropsに関数を渡すとよい.

function App (){
	const addExpenseHandler = (expenseData) => {
    	console.log(expenseData)
    }
	return(
    	<NewExpense onAddExpense={addExpenseHandler}/>
    )
}

そして、サブコンポーネントNewExpenseでpropsとして受信したonAddExpenss関数にパラメータとしてデータを入れることで、サブコンポーネントから親コンポーネントのデータを受信することができます.

function NewExpense({onAddExpense}){
	const [enteredTitle, setEnteredTitle] = useState('')
    
    const titleChangeHandler = (event) => {
    	setEnteredTitle(event.target.value)
    }

	const saveExpenseData = () => {
    	onAddExpense(enteredTitle)
    }
    return(
    	<form onSubmit={saveExpenseData}>
        	<input type="text" value={enteredTitle} onChange={titleChangeHandler} />
            <button type="submit">submit</button>
        </from>
    )
}

ソース:useState