[react]Input状態の管理
入力ステータスの管理
Inputに入力した値は下部に表示され、初期化ボタンを押すとinputが空になりますimport React from "react";
function InputSample() {
const onChange = (e) => {
console.log(e.target); // <input>
console.log(e.target.value); // input에 입력하는 값 출력
};
return (
<div>
<input onChange={onChange} />
<button>초기화</button>
<div>
<b>값: </b>
input에 입력하는 값 출력
</div>
</div>
);
}
export default InputSample;
inputのonChange
イベント
イベントオブジェクトe
:変更イベントが発生した場合、コンテンツをパラメータとして受信して使用することができる.
オブジェクトのe.target
は、現在のイベントが発生したDOMに関する情報(現在はinput DOM)を指す.その後、e.target.value
を使用してDOMの値を知ることができる.import React, { 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>
<b>값: </b>
{text}
</div>
</div>
);
}
export default InputSample;
Inputステータスを管理する際には、inputタグのvalue値を設定することが重要です.これにより、ステータスが変更されたときにinputの内容を更新できます.
複数の入力ステータスの管理
inputのname
を設定し、イベントが発生したときにこの値を参照する方法を使用します.このとき、useState
は文字列ではなくオブジェクト形式で管理されます.import React, { useState } from "react";
export default function InputTest() {
const [inputs, setInputs] = useState({ name: "", nickname: "" });
// 객체 형태로 관리
const { name, nickname } = inputs;
// 나중에 이 값을 쉽게 사용할 수 있도록 비구조화 할당으로 추출
const onChange = (e) => {
const { name, value } = e.target;
// e.target으로 name과 value를 먼저 추출
setInputs({
...inputs, // 객체를 업데이트할 때는, 기존의 객체를 먼저 복사
[name]: value, // name 키를 가진 값을 value로 설정
});
console.log(e.target.name);
console.log(e.target.value);
};
const onReset = () => {
setInputs({
name: "",
nickname: "",
});
};
return (
<div>
<input name="name" placeholder="이름" onChange={onChange} value={name} />
<input
name="nickname"
placeholder="닉네임"
onChange={onChange}
value={nickname}
/>
<button onClick={onReset}>초기화</button>
<div>
<b>값: </b>
{name}({nickname})
</div>
</div>
);
}
オブジェクトの状態を更新するときは、既存のオブジェクトの状態をコピーして更新することで不変性を維持します.不変性を維持してこそ、反応素子でステータスの更新を検出し、必要なレンダリングを行うことができます.
Reference
この問題について([react]Input状態の管理), 我々は、より多くの情報をここで見つけました
https://velog.io/@letthere/React-Input-상태-관리
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
import React from "react";
function InputSample() {
const onChange = (e) => {
console.log(e.target); // <input>
console.log(e.target.value); // input에 입력하는 값 출력
};
return (
<div>
<input onChange={onChange} />
<button>초기화</button>
<div>
<b>값: </b>
input에 입력하는 값 출력
</div>
</div>
);
}
export default InputSample;
import React, { 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>
<b>값: </b>
{text}
</div>
</div>
);
}
export default InputSample;
inputの
name
を設定し、イベントが発生したときにこの値を参照する方法を使用します.このとき、useState
は文字列ではなくオブジェクト形式で管理されます.import React, { useState } from "react";
export default function InputTest() {
const [inputs, setInputs] = useState({ name: "", nickname: "" });
// 객체 형태로 관리
const { name, nickname } = inputs;
// 나중에 이 값을 쉽게 사용할 수 있도록 비구조화 할당으로 추출
const onChange = (e) => {
const { name, value } = e.target;
// e.target으로 name과 value를 먼저 추출
setInputs({
...inputs, // 객체를 업데이트할 때는, 기존의 객체를 먼저 복사
[name]: value, // name 키를 가진 값을 value로 설정
});
console.log(e.target.name);
console.log(e.target.value);
};
const onReset = () => {
setInputs({
name: "",
nickname: "",
});
};
return (
<div>
<input name="name" placeholder="이름" onChange={onChange} value={name} />
<input
name="nickname"
placeholder="닉네임"
onChange={onChange}
value={nickname}
/>
<button onClick={onReset}>초기화</button>
<div>
<b>값: </b>
{name}({nickname})
</div>
</div>
);
}
オブジェクトの状態を更新するときは、既存のオブジェクトの状態をコピーして更新することで不変性を維持します.不変性を維持してこそ、反応素子でステータスの更新を検出し、必要なレンダリングを行うことができます.Reference
この問題について([react]Input状態の管理), 我々は、より多くの情報をここで見つけました https://velog.io/@letthere/React-Input-상태-관리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol