<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>If don't want to use JSX</title>
</head>
<body>
<div class="container">
<div id="root">
<p>Wait...</p>
</div>
<div>
<button onclick="getValue();">Output value to console</button>
</div>
</div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
const e = React.createElement;
// コンポーネントの定義
class MyComponent extends React.Component {
constructor(props, context, updater) {
super(props, context, updater);
console.log("props", props);
console.log("context", context);
console.log("updater", updater);
this.state = {
updatable: false,
value: props.value, // initial value
count: props.value.length,
// status: props.status,
};
}
render() {
return e("div", { ...this.props }, // Set name, className and ...
e("input",
{
type: "text",
value: this.state.value, // initial value
onChange: this.cbOnChange, // change value
},
),
e("span", null, this.state.count),
e("span", null, this.state.error),
);
}
componentDidUpdate(event) {
console.log("componentDidUpdate", this.state);
}
componentDidMount() {
console.log("mounted");
}
cbOnChange = (event) => {
this.setState({ value: event.target.value });
this.setState({ count: event.target.value.length });
console.log(this.props.value);
return false;
}
}
// コンポーネントの定義 2
class MyComponentTextarea extends React.Component {
constructor(props, context, updater) {
super(props, context, updater);
console.log("props", props);
console.log("context", context);
console.log("updater", updater);
this.state = {
updatable: false,
value: props.value, // initial value
count: props.value.length,
// status: props.status,
};
}
render() {
return e("div", { ...this.props }, // Set name, className and ...
e("textarea",
{
value: this.state.value, // initial value
onChange: this.cbOnChange, // change value
},
),
e("span", null, this.state.count),
e("span", null, this.state.error),
);
}
componentDidUpdate(event) {
console.log("componentDidUpdate", this.state);
}
componentDidMount() {
console.log("mounted");
}
cbOnChange = (event) => {
this.setState({ value: event.target.value });
this.setState({ count: event.target.value.length });
console.log(this.props.value);
return false;
}
}
// コンポーネントの定義 3
class MyComponentSelect extends React.Component {
constructor(props, context, updater) {
super(props, context, updater);
console.log("props", props);
console.log("context", context);
console.log("updater", updater);
this.state = {
updatable: false,
value: props.value,
records: props.records, // initial value
status: props.status
};
}
render() {
let options = this.props.records.map(function (record, index) {
// console.log("record", record, "index", index);
return (
e("option", { key: index, value: record[0] }, record[1])
);
});
return e("div", { ...this.props }, // Set name, className and ...
e("select",
{
type: "text",
value: this.state.value, // initial value
onChange: this.cbOnChange, // change value
},
options,
),
e("span", null, this.state.count),
);
}
componentDidUpdate(event) {
console.log("componentDidUpdate", this.state);
}
componentDidMount() {
console.log("componentDidMount");
}
cbOnChange = (event) => {
this.setState({ value: event.target.value });
console.log(this.props.value);
}
}
this.refs = Array();
this.refs["input-text-1"] = React.createRef();
this.refs["input-text-2"] = React.createRef();
this.refs["textarea-1"] = React.createRef();
this.refs["select-1"] = React.createRef();
getValue = () => {
console.log("getValue");
console.log(this.refs["input-text-1"].current.state.value);
console.log(this.refs["input-text-2"].current.state.value);
console.log(this.refs["textarea-1"].current.state.value);
console.log(this.refs["select-1"].current.state.value);
}
// validation
handleChange = (field, event) => {
event.persist();
// console.log(field, event);
const value = event.target.value;
// console.log("value", value);
// console.log(event.currentTarget);
const current = this.refs[field].current;
// console.log("current", current);
switch (field) {
case "input-text-1":
case "input-text-2":
if (value == "abc") {
current.setState({ error: "" });
} else {
current.setState({ error: "error" });
}
break;
case "textarea-1":
if (value == "abc") {
current.setState({ error: "" });
} else {
current.setState({ error: "error" });
}
break;
default:
}
}
const el = e("div", { className: "class1" },
e("p", {}, "Test"),
e(MyComponent, { ref: this.refs["input-text-1"], className: "class2", value: "Test 123", onChange: this.handleChange.bind(this, "input-text-1") }),
e(MyComponent, { ref: this.refs["input-text-2"], className: "class2", value: "default value", onChange: this.handleChange.bind(this, "input-text-2") }),
e(MyComponentTextarea, { ref: this.refs["textarea-1"], name: "textarea-1", className: "class4", value: "default value....", onChange: this.handleChange.bind(this, "textarea-1") }),
e(MyComponentSelect, {
ref: this.refs["select-1"], className: "class3", value: 2, records: [
[1, "aa"],
[2, "bb"],
[3, "cc"],
]
}),
);
ReactDOM.render(el, document.getElementById("root"));
</script>
</body>
<!--
https://www.youtube.com/watch?v=xJAqa0U_X50
https://getbootstrap.com/
https://reactjs.org/docs/add-react-to-a-website.html
https://the2g.com/2796
https://stackoverflow.com/questions/41296668/reactjs-form-input-validation
-->
</html>
