1

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>
            )
        }
    }
1

1 件の回答 1

0

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。