質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

button

HTMLで用いる<button>タグです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

15618閲覧

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

pikari

総合スコア14

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

button

HTMLで用いる<button>タグです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/05/24 13:52

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

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

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

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

Appjs

1import React, { useState } from 'react'; 2import Form from './Form'; 3import List from './List'; 4import { Title } from './styles'; 5 6import shortid from 'shortid'; 7import { clear } from 'sisteransi'; 8 9const App = () => { 10 11 const [todos, setTodos] = useState([ 12 { 13 id: shortid.generate(), 14 content: '洗濯をする' 15 }, 16 { 17 id: shortid.generate(), 18 content: '課題をする' 19 }, 20 { 21 id: shortid.generate(), 22 content: '御飯を作る' 23 } 24 ]); 25 26 const addTodo = (content) => { 27 const newTodos = [ 28 ...todos, //配列に中を展開する 29 { 30 id: shortid.generate(), 31 content 32 } 33 ] 34 setTodos(newTodos) 35 }; 36 37 //削除 38 const deleteTodo = (id) => { 39 setTodos(todos.filter(todo => todo.id !== id)) 40 }; 41 42 return ( 43 <> 44 <Title>Todo App</Title> 45 <Form 46 todos={todos} 47 setTodos={setTodos} 48 addTodo={addTodo} 49 50 ></Form> 51 <List todos={todos} deleteTodo={deleteTodo}></List> 52 </> 53 ); 54}; 55 56 57 58export default App; 59

Formjs

1import React, { useState } from 'react'; 2import { MyForm } from './styles'; 3import { Input } from './styles'; 4import { clear } from 'sisteransi'; 5 6 7const Form = ({ todos, setTodos, addTodo }) => { 8 const [value, setValue] = useState(''); 9 console.log(value) 10 const handleSubmit = (e) => { 11 e.preventDefault() 12 if (value) { 13 addTodo(value); 14 } else { 15 alert('文字を入力して下さい'); 16 }; 17 18 }; 19 20 21 return ( 22 <MyForm onSubmit={handleSubmit}> 23 <Input 24 type="text" 25 onChange={e => setValue(e.target.value)} 26 /> 27 <button 28 onClick={} 29 >Clear</button> 30 </MyForm> 31 ); 32}; 33 34export default Form;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

diff

1const Form = ({ todos, setTodos, addTodo }) => { 2 const [value, setValue] = useState(''); 3 console.log(value) 4 const handleSubmit = (e) => { 5 e.preventDefault() 6 if (value) { 7 addTodo(value); 8+. setValue('') 9 } else { 10 alert('文字を入力して下さい'); 11 }; 12 13 }; 14 15 16 return ( 17 <MyForm onSubmit={handleSubmit}> 18 <Input 19 type="text" 20+. value={value} 21 onChange={e => setValue(e.target.value)} 22 /> 23 <button 24-. onClick={} 25+. onClick={() => setValue('')} 26 >Clear</button> 27 </MyForm> 28 ); 29};

投稿2020/05/24 14:18

markey

総合スコア355

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pikari

2020/05/25 14:24

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

2020/05/25 14:39

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

2020/05/26 11:49

ボタンはCleatのことです!
pikari

2020/05/26 11:55

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問