Reactでformの中をリセットしたい

Question

Reactでresetボタンを押すか、送信するときにinput要素内をリセットしたい

Form要素の部分にbuttonを新たに作成しresetボタンを押すとinputの中身がリセットされるようにする。または、inputの内容が送信されると同時に入力した文字がリセットされるようにしたいです。

Form.jsのhandleSubmit関数内でif文の後に、resetする関数を追加してonClickに指定するなどしてみましたが、handleSubmitが働いてリストを追加する処理になってしまいます。

お時間のある方、アドバイスを頂きたいです。

import React, { useState } from 'react';
import Form from './Form';
import List from './List';
import { Title } from './styles';

import shortid from 'shortid';
import { clear } from 'sisteransi';

const App = () => {

  const [todos, setTodos] = useState([
    {
      id: shortid.generate(),
      content: '洗濯をする'
    },
    {
      id: shortid.generate(),
      content: '課題をする'
    },
    {
      id: shortid.generate(),
      content: '御飯を作る'
    }
  ]);

  const addTodo = (content) => {
    const newTodos = [
      ...todos,  //配列に中を展開する
      {
        id: shortid.generate(),
        content
      }
    ]
    setTodos(newTodos)
  };

  //削除
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id))
  };

  return (
    <>
      <Title>Todo App</Title>
      <Form
        todos={todos}
        setTodos={setTodos}
        addTodo={addTodo}
        
      ></Form>
      <List todos={todos} deleteTodo={deleteTodo}></List>
    </>
  );
};



export default App;

import React, { useState } from 'react';
import { MyForm } from './styles';
import { Input } from './styles';
import { clear } from 'sisteransi';


const Form = ({ todos, setTodos, addTodo }) => {
  const [value, setValue] = useState('');
  console.log(value)
  const handleSubmit = (e) => {
    e.preventDefault()
    if (value) {
      addTodo(value);
    } else {
      alert('文字を入力して下さい');
    };
   
  };


  return (
    <MyForm onSubmit={handleSubmit}>
      <Input
        type="text"
        onChange={e => setValue(e.target.value)}
      />
      <button
      onClick={}
      >Clear</button>
    </MyForm>
  );
};

export default Form;

Answer 1

やりたいことを理解できているか自信がないのですが、こちらのコードでどうでしょうか

1. input要素のvalue属性にvalueを指定し、setValueの結果を反映させる
2. handleSubmitおよび、buttonのonClickにsetValueの処理を追加する

const Form = ({ todos, setTodos, addTodo }) => {
  const [value, setValue] = useState('');
  console.log(value)
  const handleSubmit = (e) => {
    e.preventDefault()
    if (value) {
      addTodo(value);
+.    setValue('')
    } else {
      alert('文字を入力して下さい');
    };

  };


  return (
    <MyForm onSubmit={handleSubmit}>
      <Input
        type="text"
+.      value={value}
        onChange={e => setValue(e.target.value)}
      />
      <button
-.     onClick={}
+.     onClick={() => setValue('')}
      >Clear</button>
    </MyForm>
  );
};

Comments

[pikari]

コメントありがとうございます！
アドバイスして頂いたコードを実装してみましたが、ボタンを押してもalert()の内容が出てきてしまい、input要素がリセット出来ません。
何か足りない情報などありますでしょうか？

[markey]

ボタンというのはClearのボタンを指してますでしょうか？
大事なことを忘れていましたが、Claerボタンにtype属性が設定されていません。type属性のデフォルトはsubmitになるので、Clearボタンを押した際にhandleSubmitが実行されてしまいます。なので、`type="button"`と指定してみてください。

[pikari]

ボタンはCleatのことです！

[pikari]

解決することが出来ました！Clearボタンを押した時と送信時にinputの中身をリセットするという２つができるようになりました。アドバイス本当にありがとうございました！
実装の中でわからないことがありました。Input要素に追記したvalue={value}にはどういう意味があるのでしょうか？
初期値を設定するという意味でしょうか？