

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

NumberOfGamesコンポーネントが入力欄、PrintBasicInfoコンポーネントが入力内容表示部分、  
入力欄に入力(あるいは削除)する度にstate.placeが書き換えられて表示部分も変化する。  
App.jsでこの二つのコンポーネントをレンダーするだけの単純なものです。  
`npm start`で動かしてみると、期待通りの動きです。

`npm run build`でビルドしてできたファイル群をxserverにアップロードしたところ、  
パソコンのedgeとスマホのsafariでは期待通りの動きなのですが、スマホのchromeだけ動作が違います。  
スマホのchromeの場合、入力の最初の一文字だけ表示部分に表示されて、その後入力・削除しても表示部分は全く変化なし、という動きです。(リロードすると表示部分は消える。)  
原因がわかりません。よろしくお願いいたします。

* * *

**App.js**

[code]

    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;
    
[/code]

* * *

**NumberOfGames.js**

[code]

    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>
                )
            }
        }
    
[/code]

* * *

**PrintBasicInfo.js**

[code]

    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>
                )
            }
        }
    
[/code]


CC BY-SA 4.0
2019-09-05T00:37:21.890
57852
2019-11-04T07:48:09.397
2019-09-05T01:02:30.050
3060
35730
question
javascript reactjs
react.jsで作ったコンポーネントの動作がスマホのchromeだけ違う


まずはchromeの開発者ツールで確認することをおすすめします。  
Macであれば、chromeでCommand+option+iを入力すればひらけます。(または、表示>開発/管理>デベロッパーツール)  
その後、上部のResponsiveというところをクリックして、iphoneXを選択してください。その状態で動かして見て、正しく動くのか、動かなければ、Consoleに何らかのエラーが出ていると思うので、その内容を確認して見てください。


CC BY-SA 4.0
2019-11-04T07:48:09.397
60240
2019-11-04T07:48:09.397
30441
57852
answer