[react]入力の処理
入力の処理
InputSample.js
import React from 'react';
import { useState } from 'react';
function InputSample() {
const [text, setText] = useState('');
const onChange = (e) => {
setText(e.target.value);
};
const onReset = () => {
setText('');
};
return (
<div>
<input onChange={onChange} value={text} />
<button onClick={onReset}>초기화</button>
<div>
<d>값: {text}</d>
</div>
</div>
);
}
export default InputSample;
InputのonChangeイベントを使用して、eとしてイベントオブジェクトを受信します.e.target
はDOMを入力し、e.target.value
は現在入力されている値を入力します.複数入力の処理
InputSample.js
import React, { useState } from 'react';
function InputSample() {
const [inputs, setInputs] = useState({
name: '',
nickname: '',
});
const { name, nickname } = inputs;
const onChange = (e) => {
const { name, value } = e.target;
setInputs({
...inputs,
[name]: value,
});
};
const onReset = () => {
setInputs({
name: '',
nickname: '',
});
};
return (
<div>
<input name="name" placeholder="이름" onChange={onChange} value={name} ref = {nameInput} />
<input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname} />
<button onClick={onReset}>초기화</button>
<div>
<b>값: </b>
{name} ({nickname})
</div>
</div>
);
}
export default InputSample;
✔ useState({
name: '',
nickname: '',
})` 객체로 여러개의 input을 관리하고 있다.
✔非構造化配分により値を抽出します.✔ setInputs({
...inputs,
[name]: value,
});
応答の不変性を維持するために、前のすべてのオブジェクトをコピーし(スプレッドシート構文を使用して)、変更するオブジェクトを作成します.不変性を維持してこそ、反応素子で状態の更新を検出し、それに基づいて必要なレンダリングを行うことができる。
Reference
この問題について([react]入力の処理), 我々は、より多くの情報をここで見つけました https://velog.io/@jiiyoung/Reactinput-처리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol