複数のInputを扱う

はじめに

前回は「制御コンポーネントの作成」について試してみました。
今日はコンポーネントに複数のInputを扱う場合について書いてみます。

前回からの拡張

まず、一番簡単なのは何も考えずにinput分だけstate変数などを作ってあげることです。
以下のような感じです。

import React from 'react';
import styled from 'styled-components';

const Input = styled.input`
  height: 60px;
  width: 450px;
  border: 1px solid #BEBEBE;
  box-sizing: border-box;
  border-radius: 6px;
  padding-left: 16px;
  font-size: 24px;
  color: #222222;
  ::placeholder {
    color: #C1C1C1;
  }
`;

type Props = {
    value: string,
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
    placeholder: string,
};
  
const InputText = (props: Props) => {
  const {
    value,
    onChange,
    placeholder,
  } = props;
  return (
    <Input
      type=""
      value={value}
      placeholder={placeholder}
      onChange={onChange}
    />
  );
};
  
export default InputText;

import React from 'react';
import styled from 'styled-components';

const Input = styled.input`
  height: 60px;
  width: 450px;
  border: 1px solid #BEBEBE;
  box-sizing: border-box;
  border-radius: 6px;
  padding-left: 16px;
  font-size: 24px;
  color: #222222;
  ::placeholder {
    color: #C1C1C1;
  }
`;

type Props = {
    isChecked: boolean,
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
};
  
const InputCheckbox = (props: Props) => {
  const {
    isChecked,
    onChange,
  } = props;
  return (
    <Input
      type="checkbox"
      checked={isChecked}
      onChange={onChange}
    />
  );
};
  
export default InputCheckbox;

import React, { useState, useCallback, useMemo } from 'react';
import logo from './logo.svg';
import './App.css';

import InputText from './components/elements/inputText';
import InputCheckbox from './components/elements/inputCheckbox';

const App=()=> {
  const [valueState, setValue] = useState('');
  const [checkedState, setChecked] = useState(false);
  const handleChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };
  const handleChangeChecked = (e: React.ChangeEvent<HTMLInputElement>) => {
    setChecked(e.target.checked);
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <InputText
            value={valueState}
            placeholder="ID"
            onChange={handleChangeValue}
        />
        <InputCheckbox
            isChecked={checkedState}
            onChange={handleChangeChecked}
        />
      </header>
    </div>
  );
}

export default App;

もう少しスマートに書き直す

stateなどはまとめることができます。

import React, { useState, useCallback, useMemo } from 'react';
import logo from './logo.svg';
import './App.css';

import InputText from './components/elements/inputText';
import InputCheckbox from './components/elements/inputCheckbox';

type Form = {
  value: string,
  checked: boolean,
};

const App=()=> {
  const [stateForm, setForm] = useState({
    value: '',
    cheked: false,
  });

  const handleChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({...stateForm, value: e.target.value});
  };
  const handleChangeChecked = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({...stateForm, cheked: e.target.checked});
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <InputText
            value={stateForm.value}
            placeholder="ID"
            onChange={handleChangeValue}
        />
        <InputCheckbox
            isChecked={stateForm.cheked}
            onChange={handleChangeChecked}
        />
      </header>
    </div>
  );
}

export default App;

ハンドラでは...stateFormで展開してあげる形で渡してあげるのがコツみたいです。