ローカル環境で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の初学者のためなぜこうなるかがいまいちよく分かっておりません。
どなたか詳しい方がいらっしゃいましたらご教示願います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。