[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,
        });

応答の不変性を維持するために、前のすべてのオブジェクトをコピーし(スプレッドシート構文を使用して)、変更するオブジェクトを作成します.

不変性を維持してこそ、反応素子で状態の更新を検出し、それに基づいて必要なレンダリングを行うことができる。