Raectでinputの中の文字を更新する方法

現在ReactとReduxでtodoアプリを作っているのですが、送信ボタンを押してもInputの中の文字が入力されたままとなっていて、困っております。
本来であれば、e.preventDefaultで中身を更新できるはずですが、onChangeイベントをすでに使っているので使用できませんでした。
他に対策はあるのでしょうか？

以下がコードとです。

import React, { Component } from "react";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import { connect } from "react-redux";
import * as actionTypes from "../../store/actions/actions";
class Form extends Component {
  render() {
    return (
      <div>
        <form onSubmit={(e) => e.preventDefault()}>
          <TextField
            onChange={(e) => this.props.onChangeHandler(e.target.value)}
          ></TextField>
          <Button
            onClick={() => this.props.onStoreResult(this.props.value)}
            style={{ color: "black" }}
          >
            送信
          </Button>
        </form>
        <ul>
          {this.props.add.map((l) => (
            <li key={l.id}>{l.value}</li>
          ))}
        </ul>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    value: state.change.value,
    add: state.add.todo
  };
};
const mapDisptchToProps = (dispatch) => {
  return {
    onStoreResult: (v) => dispatch({ type: actionTypes.ADD, value: v }),
    onChangeHandler: (e) => dispatch({ type: actionTypes.CHANGE, value: e })
  };
};
export default connect(mapStateToProps, mapDisptchToProps)(Form);

行動規範の内容に同意します

回答1件

ベストアンサー

e.preventDefault はフォームを送信しないだけで、中身をクリアしてくれるものではないと思います。

送信ボタンを押した時に TextField をクリアするには、TextField を制御コンポーネントにして (つまり、value を指定して)、Button の onClick でクリアする (または、reducer の actionTypes.ADD の処理で state.change.value の値をクリアする) 必要があります。
参考: フォーム – React

diff
1           <TextField
2+            value={this.props.value}
3             onChange={(e) => this.props.onChangeHandler(e.target.value)}
4           ></TextField>
5           <Button
6-            onClick={() => this.props.onStoreResult(this.props.value)}
7+            onClick={() => {
8+              this.props.onChangeHandler('');
9+              this.props.onStoreResult(this.props.value);
10+            }}
11             style={{ color: "black" }}
12           >
13             送信
14           </Button>