Material-UIのTextFieldコンポーネントの初期値を消すことができない

Question

＜現状＞
現在、Material-UIのTextFieldコンポーネントの初期値を消すことができなく、困っています。
defaultValueをセットしてみたり色々試しましたが、うまく行きません。宜しくお願いします。

＜実現したいこと＞
①Material-UIのTextFieldで数値を扱いたい
②Material-UIのTextFieldの初期値を0にセットしたい
③Material-UIのTextFieldの値を削除して、新規の値を入力したい
④Material-UIのTextFieldの値を0にするクリアボタンを作成したい

＜コード>

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

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        d1: 0
    }
  }

  handleChange = (event) => {
    this.setState({
      [event.target.name]: Number(event.target.value)
    })
  }

  handleClear = () => {
    this.setState({
        d1: 0
    })
  }

 render(){
  <div>
    <TextField
     type="number"
     name="d1"
     InputLabelProps={{
      shrink: true,
     }}
     margin="dense"
     value={this.state.d1}
     onChange={this.handleChange}
    />
    <Button onClick={ this.handleClear }>
      クリア
    </Button>
  </div>

Comments

[itepechi]

削除キー/バックスペースキーを押下してもテキストフィールドの中に0が残り続けて困っている、という認識で合っていますか？

[hoshi-takanori]

constructor で handleChange と handleClear に this を bind すべきでは？
https://ja.reactjs.org/docs/faq-functions.html

[action_moto]

@itepechi
その通りです。わかりにくくてすいません。0が消せず、５を入力すると05となってしまいます。

[action_moto]

@hoshi-takanori
できました！ありがとうございます。bindに対する理解が不十分なようなので、勉強します!

[action_moto]

@itepechi
ありがとうございます。

[itepechi]

質問文のコードはアロー関数を使用しているのでbind（thisの束縛）は必要ありません（https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions）

[action_moto]

@hoshi-takanori @itepechi
一度、バックスペースキーでテキストフィールドの中の０が消えたのですが、もう一度やり直してみたところ、０が消えません。先程のできたを訂正します。

[hoshi-takanori]

@itepechi
そうですね。見落としてました。ご指摘ありがとうございます。

@action_moto
クリアした時に 0 が残るのが問題なら、handleClear で d1 を 0 にしているのが原因なので、空文字列にすればいいのでは。

[hoshi-takanori]

また、テキストフィールドが 0 のときにバックスペースを押しても消えないのは、event.target.value は空文字になるけど、handleChange でそれを数値に変換してるために 0 になるからでしょうね。

Answer 1

Reactのコンポーネントには__controlled__と__uncontrolled__と呼ばれる2種類の状態が存在します。

• controlled
  要素がstateにより制御されている
• uncontrolled
  要素が制御されていないか、refを介して直接DOMを操作されている

質問文のテキストフィールドにはvalue={this.state.d1}という属性が設定されているため、要素が__controlled__の状態（stateにより制御されている状態）になっています。__controlled__の状態ではDOMはstateの変更を受けますが、stateはDOMの変更を受けません。そのため、例えばonChangeで変更イベントをキャッチし、handleChange()でstateにイベントから受け取った値を入れ、stateの内容をもう一度DOMに戻すといった手順を踏む必要があります。言い方を変えれば、画面に表示されている数字はテキストフィールドに入力した結果ではなく、stateを変更した結果ということになります。

stateの初期化やhandleChange()を参照するとd1の型は常にnumberですが、numberには""に相当する状態が存在しないため、型変換（Number()）の際に0に変更されます。テキストフィールドの内容を消そうとすると0が表示される理由はここにあります。

この問題を解決するためにはテキストフィールドと結びつける値を型がstringの値に変更します。以下は直感的な操作を重視した実装の一例です：

import React from "react";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      d1: {
        number: 0,
        rawString: "0",
      },
    };
  }

  handleChange = (event) => {
    const name = event.target.name;
    const rawString = event.target.value;
    const number = Number.parseInt(rawString, 10);

    if (Number.isNaN(number)) {
      // NaNの場合はnumberを更新しない
      this.setState({
        ...this.state,
        [name]: {
          ...this.state[name],
          rawString,
        },
      });
    } else {
      // NaNでない場合は数字を変更する
      this.setState({
        ...this.state,
        [name]: {
          number,
          rawString: number.toString(), // 文字も数字から作成する
        },
      });
    }
  };

  handleClear = () => {
    this.setState({
      d1: {
        number: 0,
        rawString: "0",
      },
    });
  };

  render() {
    return (
      <div>
        <TextField
          type="number"
          name="d1"
          InputLabelProps={{
            shrink: true,
          }}
          margin="dense"
          value={this.state.d1.rawString}
          onChange={this.handleChange}
        />
        <Button onClick={this.handleClear}>クリア</Button>
        <p>
          数字は<code>{this.state.d1.number}</code>
        </p>
      </div>
    );
  }
}