During react practice, I rewrite the app.js of the app created by create-react-app, and I make simple components and load and move them.
NumberOfGames component is input field, PrintBasicInfo component is input display area,
Every time an input (or deletion) is inputted to an input field, state.place is rewritten and the display part is also changed.
Simply render these two components in App.js.
npm start works as expected.
npm run build created a group of files to xserver and
It works as expected with edge of PC and safari of smartphone, but only chrome of smartphone works differently.
In the case of chrome on a smartphone, only the first character of the input is displayed on the display part, and the display part does not change at all even if you enter or delete it after that.(On reload, the display disappears.)
I don't know the cause.Thank you for your cooperation.
App.js
import React from 'react';
import logo from './logo.svg';
import'./App.css';
import NumberOfGames from'./NumberOfGames';
import PrintBasicInfo from './PrintBasicInfo';
class App extensions React.Component {
constructor(props){
super(props);
This.state = {
US>"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='+encodeURIC component(this.state.place);
}
render() {
return(
<div className="App">
<NumberOfGames name_of_button="It's a store name, isn't it?"nog="place" onClick={(e)=>this.handleClickNOG(e)}name_of_unit="It's a store, isn't it?"/>
<PrintBasicInfos_nog={this.state.s_nog}c_nog={this.state.c_nog}place={this.state.place} investment={this.state.investigation} recovery={this.state.recovery}/>
</div>
);
}
}
export default App;
NumberOfGames.js
import React from 'react';
import ReactDOM from 'react-dom';
export default class NumberOfGames extensions 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}/><className{>input_}=inputpthis.props.name;className{> _
</div>
)
}
}
PrintBasicInfo.js
import React from 'react';
import ReactDOM from 'react-dom';
export default class PrintBasicInfo extensions React.Component {
render() {
return(
<div>
<pclassName="bigchar">Store name: {this.props.place}Store</p>
</div>
)
}
}
First of all, I recommend you to check with Chrome's developer tool.
If it's a Mac, you can open it by typing Command+option+i in chrome.(or View > Development & Management > Developer Tools)
Then click Responsive at the top and select iphoneX.If you move it in that state and see if it works properly or not, I think there is some error in the console, so please check it out.
© 2024 OneMinuteCode. All rights reserved.