Reactでテキストボックスに入力した文字を表示させたいです。
Q&A
Closed
Reactでテキストボックスに入力した文字を表示させたいです。
reactで初歩的なtodoアプリを実装しています。
youtubeなどを見ながらなんとなく実装はできたのですが、
動画に無い方法で任意の値を任意の場所に出力させようとしているのですが基礎的な書き方が分からず質問させていただきました。
発生している問題・エラー
テキストボックス内で入力したタスクを任意の場所に表示させる事ができません。
react内での値の受け渡し、表示のさせ方をなかなか理解できないです。
import { useState, useRef } from "react";
import "./App.css";
// import TodoList from "./TodoList";
import { v4 as uuidv4 } from "uuid";
function App() {
const [todos, setTodos] = useState([]);
const todoNameRef = useRef();
const h1 = "Todoリスト";
// タスクを追加する関数
const handleAddTodo = () => {
const task = todoNameRef.current.value;
console.log(todoNameRef.current.value);
setTodos((beforeTasks) => {
console.log(task);
return [...beforeTasks, { key: uuidv4(), task: task, completed: false }];
});
todoNameRef.current.value = null;
};
return (
<div>
<h1>{h1}</h1>
<label>
<input type="radio" />
すべて
</label>
<label>
<input type="radio" />
作業中
</label>
<label>
<input type="radio" />
完了
</label>
<div>{setTodos}</div>
{/* <TodoList todos={todos} /> */}
<h2>新規タスクの追加</h2>
<input type="text" ref={todoNameRef}></input>
<button onClick={handleAddTodo}>追加</button>
</div>
);
}
export default App;
自分で試したこと
関数setTodosの戻り値に表示させたい値を設定しているので、
タスクを表示させたい場所でsetTodosを実行しています。
他にもタスクを表示させる関数を記述してみたり、todoNameRef.current.valueを
どうにか使えないか試行錯誤しているのですが、コンソール上には入力した値を表示できても、HTML上に表示することが出来ません。
自身でも調べてみましたが、なかなか理解に及ばず
基礎的な質問となり大変恐縮ですが、ご教授いただけますと幸いです。
0
