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