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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

2回答

1166閲覧

reactで入力された文字を表示したい

HYKTSNG

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2020/07/23 06:39

編集2020/07/23 07:50

JSX

1/** @jsx jsx */ 2import { css, jsx } from "@emotion/core" 3import { useState } from "react" 4 5/** 6 * TODOアプリ 7 */ 8 9export const Todo = () => { 10 const [text, setText] = useState("") 11 12 const onClickAdd = (e) => { 13 console.log(e) 14 } 15 return ( 16 <div> 17 <div css={root}>Todo App</div> 18 <div css={inputWrapper}> 19 <input 20 onChange={(e) => { 21 setText(e.target.value) 22 }} 23 value={text} 24 /> 25 <button 26 // TODO リストに追加ボタンを実装 27 onClick={(e) => { 28 onClickAdd(e) 29 }} 30 > 31 追加 32 </button> 33 </div> 34 </div> 35 ) 36} 37 38const root = css` 39 font-size: 56px; 40 padding-top: 56px; 41 padding-left: 64px; 42` 43const inputWrapper = css` 44 font-size: 24px; 45 padding-top: 24px; 46 padding-left: 56px; 47` 48// 最後に色付ける 49// background-color: aquamarine; 50

イメージ説明

追加ボタン押したら下に表示されるようにしたいのですがやり方がいまいちわかりません。
どなたか教えてほしいです。

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

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

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

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

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

HYKTSNG

2020/07/23 07:51

ご丁寧にありがとうございます。訂正しました。
guest

回答2

0

新たにstateを定義し、ボタンを押した時にinputされている文字列で更新、
jsxにて、

<p>{ newState }</p>

といった記述をすれば実現するとおもいます

todoという事なので、複数表示を想定されているかもしれません。
新たなstateは配列として定義して、ボタンを押すたびに要素を追加していき、
当該stateをjsx内でループさせれば実現できると思います

データを永続化したいのであれば、localStorageやAPIとの連携が必要になります

投稿2020/07/24 23:23

編集2020/07/24 23:27
web_inago

総合スコア74

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

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

HYKTSNG

2020/07/25 01:45

なるほど、 アドバイスのほうもありがとうございます!
guest

0

自己解決

javascript

1/** @jsx jsx */ 2import { css, jsx } from "@emotion/core" 3import { useState } from "react" 4 5/** 6 * TODOアプリ 7 */ 8 9export const Todo = () => { 10 // 初期値のList 11 const initialState = [ 12 { 13 isCompleted: false, 14 task: "Learn vue.js", 15 }, 16 ] 17 const [text, setTask] = useState("") 18 const [todos, setTodo] = useState(initialState) 19 20 const handleNewTask = (e) => { 21 setTask(e.target.value) 22 } 23 24 const onClickAdd = (e) => { 25 console.log(e) 26 } 27 28 return ( 29 <div> 30 <div css={root}>Todo App</div> 31 <div css={inputWrapper}> 32 <input onChange={handleNewTask} value={text} /> 33 <button 34 // TODO リストに追加ボタンを実装 35 onClick={(e) => { 36 onClickAdd(e) 37 }} 38 > 39 追加 40 </button> 41 </div> 42 43 <ul> 44 {todos.map((todo, index) => ( 45 <li key={index}>{todo.task}</li> 46 ))} 47 </ul> 48 </div> 49 ) 50} 51 52const root = css` 53 font-size: 56px; 54 padding-top: 56px; 55 padding-left: 64px; 56` 57const inputWrapper = css` 58 font-size: 24px; 59 padding-top: 24px; 60 padding-left: 56px; 61` 62// 最後に色付ける 63// background-color: aquamarine; 64

17行目と20-22行目を書いたらうまくいきました
ありがとうございました

投稿2020/07/25 01:50

HYKTSNG

総合スコア19

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問