1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | import React, {Component} from 'react'; import Rect from "./Rect"; import './App.css'; class App extends Component { input = ''; msgStyle = { fontSize:"20pt", color:"#900", margin:"20px 0px", padding: "5px", } inputStyle = { fontSize: "12pt", padding: "5px" } constructor(props) { super(props); this.state = { message:'type your name:' }; this.doChange = this.doChange.bind(this); this.doSubmit = this.doSubmit.bind(this); } doChange(event) { this.input = event.target.value; } doSubmit(event) { this.setState({ message: 'Hello, ' + this.input + '!!' }); event.preventDefault(); } render() { return <div className="App"> <h1>React</h1> <h2>{this.state.message}</h2> <form onSubmit={this.doSubmit}> <label> <span style={this.inputStyle}></span>Message: <input type="text" style={this.inputStyle} onChange={this.doChange} required pattern="[A-Za-z _,.]+"/> </label> <input type="submit" style={this.inputStyle} value="Click" /> </form> </div>; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import React, {Component} from 'react'; import Rect from "./Rect"; import './App.css'; class App extends Component { input = ''; msgStyle = { fontSize:"20pt", color:"#900", margin:"20px 0px", padding: "5px", } constructor(props) { super(props); this.state = { message:'type your name:' }; this.doCheck = this.doCheck.bind(this); } doCheck(event) { alert(event.target.value + "は長すぎます。(最大10文字)" ); } render() { return <div className="App"> <h1>React</h1> <h2>{this.state.message}</h2> <Message maxlength="10" onCheck={this.doCheck} /> </div>; } } class Message extends Component { inputStyle = { fontSize:"12pt", padding:"5px" } constructor(props) { super(props); this.doChange = this.doChange.bind(this); } doChange(e) { if(e.target.value.length > this.props.maxlength) { this.props.onCheck(e); e.target.value = e.target.value.substr(0,this.props.maxlength); } } render() { return <input type="text" style={this.inputStyle} onChange={this.doChange} /> } } export default App; |
### コンテキスト
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | import React, {Component} from 'react'; import Rect from "./Rect"; import './App.css'; let data = {title: 'Title', message: 'this is sample message.' }; const SampleContext = React.createContext(data); class App extends Component { render() { return <div className="App"> <h1>Context</h1> <Title /> <Message /> </div>; } } class Title extends Component { static contextType = SampleContext; render() { return ( <div> <h2>{this.context.title}</h2> </div> ); } } class Message extends Component { static contextType = SampleContext; render() { return ( <div> <p>{this.context.message}</p> </div> ) } } export default App; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | import React, {Component} from 'react'; import Rect from "./Rect"; import './App.css'; let theme = { light: { backgroundColor: "#eef", color: "#006", padding:"10px", }, dark: { backgroundColor:"#006", color:"#eef", padding:"10px", } }; const ThemeContext = React.createContext(theme.dark); class App extends Component { static contextType = ThemeContext; render() { return <div className="App" style={this.context}> <h1>Context</h1> <Title value="Content page" /> <Message value="This is Content sample."/> <Message value="これはテーマのサンプルです。"/> </div>; } } class Title extends Component { static contextType = ThemeContext; render() { return ( <div> <h2 style={this.context}>{this.props.value}</h2> </div> ); } } class Message extends Component { static contextType = ThemeContext; render() { return ( <div> <p style={this.context}>{this.props.value}</p> </div> ) } } export default App; |