<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Learn React</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function FancyBorder(props){
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function Dialog(props){
return(
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
{props.children}
</FancyBorder>
)
}
class SigUpDialog extends React.Component{
constructor(props){
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
this.state = {login: ''};
}
handleChange(e){
this.setState({login: e.target.value});
}
handleSignUp(){
alert(`Welcome aboard,${this.state.login}!`);
}
render(){
return (
<Dialog
title="Mars Exploration Program"
message="How should we refer to you?">
<input
value={this.state.login}
onChange={this.handleChange}/>
<button onClick={this.handleSignUp}>
Sign Me Up!
</button>
</Dialog>
)
}
}
ReactDOM.render(
<SigUpDialog />,
document.getElementById('root')
);
</script>
</body>
</html>