import React, {Component} from 'react';
import Rect from "./Rect";
import './App.css';
class App extends Component {
data = [];
msgStyle = {
fontSize:"20pt",
color:"#900",
margin:"20px 0px",
padding: "5px",
}
area = {
width: "500px",
height: "500px",
border: "1px solid blue"
}
constructor(props) {
super(props);
this.state = {
list: this.data
};
this.doAction = this.doAction.bind(this);
}
doAction(e) {
let x = e.pageX;
let y = e.pageY;
this.data.push({x:x, y:y});
this.setState({
list:this.data
});
}
draw(d) {
let s = {
position:"absolute",
left: (d.x - 25) + "px",
top:(d.y - 25) + "px",
width: "50px",
height: "50px",
backgroundColor: "#66f3",
};
return <div style={s}></div>
}
render() {
return <div className="App">
<h1>React</h1>
<h2 style={this.msgStyle}>show rect. </h2>
<div style={this.area} onClick={this.doAction}>
{this.data.map((value) => this.draw(value))}
</div>
</div>;
}
}
export default App;
import React, {Component} from 'react';
import Rect from "./Rect";
import './App.css';
class App extends Component {
data = [
"This is list sample",
"これはリストのサンプルです。",
"配列をリストに変換します。"
];
msgStyle = {
fontSize:"20pt",
color:"#900",
margin:"20px 0px",
padding: "5px",
}
constructor(props) {
super(props);
this.state = {
list: this.data
};
}
render() {
return <div className="App">
<h1>React</h1>
<h2 style={this.msgStyle}>show list.</h2>
<List title="サンプル・リスト" data={this.data} />
</div>;
}
}
class List extends Component {
number = 1;
title = {
fontSize:"20pt",
fontWeight:"bold",
color:"blue",
};
render() {
let data = this.props.data;
return (
<div>
<p style={this.title}>{this.props.title}</p>
<ul>
{data.map((item) =>
<Item number={this.number++} value={item} key={this.number} />
)}
</ul>
</div>
);
}
}
class Item extends Component {
li = {
listStyleType:"square",
fontSize:"16pt",
color:"#06",
margin:"0px",
padding: "0px",
}
num = {
fontWeight:"bold",
color:"red"
}
render() {
return (
<li style={this.li}>
<span style={this.num}>[{this.props.number}]</span>
{this.props.value}
</li>
)
}
}
export default App;
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.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>
<Message title="Children">
これはコンポーネント内のコンテンツです。
マルでテキストを分割し、リストにして表示します。
改行は必要ありません。
</Message>
</div>;
}
}
class Message extends Component {
li = {
fontSize:"16pt",
color:"#06",
margin:"0px",
padding: "0px",
}
render() {
let content = this.props.children;
let arr = content.split('。');
let arr2 = [];
for(let i = 0; i < arr.length;i++){
if(arr[i].trim() != '') {
arr2.push(arr[i]);
}
}
let list = arr2.map((value,key) => (
<li style={this.li} key={key}>{value}.</li>
));
return <div>
<h2>{this.props.title}</h2>
<ol>{list}</ol>
</div>
}
}
export default App;
