ReactJSでフォーム開発を効率化：Material-UIとRedux-Formを使ってTextField type="number" にmin/maxを設定する方法

2024-06-15

ReactJS、Material-UI、Redux-Formを使って、TextField type="number" に min/max 属性を設定する方法について解説します。この設定により、ユーザーが入力できる数値の範囲を制限することができます。

手順

TextField コンポーネントに InputProps を追加する

TextField コンポーネントに InputProps プロパティを追加し、その中に inputProps オブジェクトを定義します。inputProps オブジェクトには、min と max プロパティを設定します。

<TextField
  type="number"
  InputProps={{
    inputProps: {
      min: 10,
      max: 100,
    },
  }}
  label="数値入力"
/>

上記の例では、min プロパティを 10 に設定し、max プロパティを 100 に設定しています。つまり、ユーザーが入力できる数値は 10 から 100 の範囲内となります。

Redux-Form を使用する場合は、validate 属性を設定する

Redux-Form を使用している場合は、validate 属性を設定して、入力値の検証を行うことができます。validate 属性には、関数オブジェクトを渡します。この関数オブジェクトは、入力値を受け取り、エラーオブジェクトを返す必要があります。

<Field
  name="number"
  component={TextField}
  type="number"
  validate={value => {
    if (value < 10 || value > 100) {
      return '入力値は 10 から 100 の範囲内である必要があります。';
    }
    return undefined;
  }}
  InputProps={{
    inputProps: {
      min: 10,
      max: 100,
    },
  }}
  label="数値入力"
/>

上記の例では、validate 関数で入力値が 10 未満または 100 超過しているかどうかをチェックしています。もしそのような値が入力された場合は、エラーメッセージを返します。

TextField コンポーネントの見た目を変更するには、style プロパティを使用することができます。
Redux-Form で他のタイプの検証を行うには、validate 関数の引数と返値の形式を変更する必要があります。

シンプルな例

import React from 'react';
import { TextField } from '@material-ui/core';

const App = () => {
  return (
    <div>
      <TextField
        type="number"
        InputProps={{
          inputProps: {
            min: 10,
            max: 100,
          },
        }}
        label="数値入力"
      />
    </div>
  );
};

export default App;

このコードは、min プロパティを 10 に設定し、max プロパティを 100 に設定した TextField コンポーネントをレンダリングします。

Redux-Form を使用した例

import React from 'react';
import { Field } from 'redux-form';
import { TextField } from '@material-ui/core';

const validate = (value) => {
  if (value < 10 || value > 100) {
    return '入力値は 10 から 100 の範囲内である必要があります。';
  }
  return undefined;
};

const App = () => {
  return (
    <form>
      <Field
        name="number"
        component={TextField}
        type="number"
        validate={validate}
        InputProps={{
          inputProps: {
            min: 10,
            max: 100,
          },
        }}
        label="数値入力"
      />
      <button type="submit">送信</button>
    </form>
  );
};

export default App;

このコードは、Redux-Form を使用して、入力値の検証を行っています。validate 関数は、入力値が 10 未満または 100 超過しているかどうかをチェックし、そのような値が入力された場合はエラーメッセージを返します。

説明

上記のコードは、React、Material-UI、Redux-Form の基本的な知識を前提としています。
コードを実行するには、それぞれのパッケージをインストールする必要があります。
サンプルコードはあくまでも一例であり、状況に合わせて変更する必要があります。

ReactJS、Material-UI、Redux-Form で TextField type="number" に min/max を設定するその他の方法

useForm hook を使用する

React Hook Form を使用すると、min と max プロパティを直接 TextField コンポーネントに渡すことができます。

import React from 'react';
import { useForm } from 'react-hook-form';
import { TextField } from '@material-ui/core';

const App = () => {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextField
        {...register('number', { min: 10, max: 100 })}
        type="number"
        label="数値入力"
      />
      <button type="submit">送信</button>
    </form>
  );
};

export default App;

カスタムバリデーション関数を使用する

Redux-Form でカスタムバリデーション関数を使用し、min と max の値を検証することができます。

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { TextField } from '@material-ui/core';

const validate = (values) => {
  const errors = {};
  if (values.number < 10 || values.number > 100) {
    errors.number = '入力値は 10 から 100 の範囲内である必要があります。';
  }
  return errors;
};

const App = () => {
  const handleSubmit = (values) => {
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="number"
        component={TextField}
        type="number"
        validate={validate}
        label="数値入力"
      />
      <button type="submit">送信</button>
    </form>
  );
};

const WrappedApp = reduxForm({ form: 'example' })(App);

export default WrappedApp;

min と max 属性を HTML 属性として設定する

HTML 属性として min と max を設定することもできますが、この方法は推奨されていません。

<TextField
  type="number"
  min={10}
  max={100}
  label="数値入力"
/>

useImperativeHandle hook を使用して、TextField コンポーネントの ref を取得し、min と max プロパティを動的に設定することができます。

import React, { useState, useRef } from 'react';
import { TextField } from '@material-ui/core';

const App = () => {
  const [min, setMin] = useState(10);
  const [max, setMax] = useState(100);
  const textFieldRef = useRef(null);

  const handleMinChange = (event) => {
    setMin(parseInt(event.target.value));
  };

  const handleMaxChange = (event) => {
    setMax(parseInt(event.target.value));
  };

  useEffect(() => {
    if (textFieldRef.current) {
      textFieldRef.current.inputProps.inputProps.min = min;
      textFieldRef.current.inputProps.inputProps.max = max;
    }
  }, [min, max]);

  return (
    <div>
      <TextField
        ref={textFieldRef}
        type="number"
        label="数値入力"
      />
      <div>
        <label>Min:</label>
        <input type="number" value={min} onChange={handleMinChange} />
      </div>
      <div>
        <label>Max:</label>
        <input type="number" value={max} onChange={handleMaxChange} />
      </div>
    </div>
  );
};

export default App;