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

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

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

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

React.js

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

Q&A

解決済

1回答

4971閲覧

reactのinputタグで日本語変換ができない

macaroni323

総合スコア31

JavaScript

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

React.js

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

0グッド

0クリップ

投稿2019/02/20 15:47

ローカル環境でReactの開発をしています。

formのinputタグで日本語変換ができない状態です。
例えば「nihonngo」とタイプすると「nいhおnngお」と表示されてしまいます。

React

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>React Todo App</title> 6 <link rel="stylesheet" href="css/styles.css"> 7 <script src="https://unpkg.com/react@16.8.2/umd/react.development.js"></script> 8 <script src="https://unpkg.com/react-dom@16.8.2/umd/react-dom.development.js"></script> 9 <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> 10</head> 11<body> 12 <div id="root"></div> 13 <script type="text/babel"> 14 (() => { 15 16 function TodoForm(props) { 17 return ( 18 <form onSubmit={props.addTodo}> 19 <input type="text" value={props.item} onChange={props.updateItem}/> 20 </form> 21 ); 22 } 23 24 class App extends React.Component { 25 constructor() { 26 super(); 27 this.state = { 28 todos: [], 29 item: '', 30 }; 31 this.updateItem = this.updateItem.bind(this); 32 } 33 34 35 updateItem(e) { 36 this.setState({ 37 item: e.target.value 38 }); 39 } 40 41 42 render() { 43 return ( 44 <div className="container"> 45 <TodoForm 46 item={this.state.item} 47 updateItem={this.updateItem} 48 /> 49 </div> 50 ); 51 } 52 } 53 54 ReactDOM.render( 55 <App/>, 56 document.getElementById('root') 57 ); 58 })(); 59 </script> 60</body> 61</html>

ただ上記のソースでrender()の中の、

React

1item={this.state.item}

の行をコメントアウトすると、日本語変換が可能になります。
(キーボードで「nihonngo」とタイプして「にほんご」を「日本語」と漢字変換できます。)

item={this.state.item}がコメントアウトでない場合は
キーボードで日本語入力をしようとして「nihonngo」とタイプすると「nいhおnngお」となります。

Reactの初学者のためなぜこうなるかがいまいちよく分かっておりません。

どなたか詳しい方がいらっしゃいましたらご教示願います。

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

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

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

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

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

guest

回答1

0

自己解決

読み込んでいるスクリプトを「16.2.0」に指定することで解決しました

投稿2019/02/21 01:28

macaroni323

総合スコア31

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問