react.jsで作ったコンポーネントの動作がスマホのchromeだけ違う

Question

reactの練習で、create-react-appで作成したアプリのapp.jsを書き換えたり、簡単なコンポーネントを作って読み込んで動かしたりしています。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import NumberOfGames from './NumberOfGames';
import PrintBasicInfo from './PrintBasicInfo';

class App extends React.Component {

		constructor(props){
			super(props);


			
			this.state={

				place	:	""

			}

		}

		handleClickNOG(e){
			let name=e.target.name;
			let value=e.target.value;
			
			this.setState({[name]:value});
		}


		
		componentDidUpdate(prevProps,prevState){

			localStorage.setItem('place',this.state.place);


			document.cookie = 'place='+encodeURIComponent(this.state.place);

		}



render(){  
  return (
    <div className="App">
	<NumberOfGames name_of_button="店名ですよね" nog="place" onClick={(e)=>this.handleClickNOG(e)} name_of_unit="店ですよね" />

	<PrintBasicInfo s_nog={this.state.s_nog} c_nog={this.state.c_nog} place={this.state.place} investment={this.state.investment} recovery={this.state.recovery}/>
    </div>
  );
}
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';

	export default class NumberOfGames extends React.Component {
		constructor(props) {
    			super(props);
    			this.state = {
      				
    			};
  		}

		render(){
			
			return (      
				<div>
        				<p className="input_label">{this.props.name_of_button}</p>:<input type="text" className="input" name={this.props.nog} onChange={this.props.onClick}/><p className="input_label">{this.props.name_of_unit}</p>
      				</div>
				
			)
		}

	}

import React from 'react';
import ReactDOM from 'react-dom';

	export default class PrintBasicInfo extends React.Component {
		render(){
			return(
				<div>
					<p className="bigchar">店名 : {this.props.place} 店</p>

				</div>
			)
		}
	}

NumberOfGamesコンポーネントが入力欄、PrintBasicInfoコンポーネントが入力内容表示部分、
入力欄に入力(あるいは削除)する度にstate.placeが書き換えられて表示部分も変化する。
App.js
でこの二つのコンポーネントをレンダーするだけの単純なものです。
npm startで動かしてみると、期待通りの動きです。
npm run buildでビルドしてできたファイル群をxserverにアップロードしたところ、
パソコンのedgeとスマホのsafariでは期待通りの動きなのですが、スマホのchromeだけ動作が違います。
スマホのchromeの場合、入力の最初の一文字だけ表示部分に表示されてその後はまったく変化なし、という動きです。(リロードすると表示部分は消える。)
原因がわかりません。よろしくお願いいたします。

Comments

[gentaro]

他人に読んでもらうコードなら、まず余計な空行削除したりインデントをちゃんと揃えたりした方が良いです。
他人に読ませない場合でもそうした方が良いけど。

Answer 1

すごくしょうもないことなのですが、chromeの自動翻訳機能がオンになっていたのが原因でした。
選択言語を「英語」にした場合スマホのchromeでも期待通りの正常な挙動になりました。
選択言語を「日本語」にすると質問文に記した挙動。
もうこれ以上どうしようもないと思いますのでこれで解決とします。

Comments

[maisumakun]

HTMLの側に「lang="ja"」のように明記をすれば改善するかもしれません。