0
点赞
收藏
分享

微信扫一扫

React-组合模式

JamFF 2022-07-18 阅读 69

<!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>

 



举报

相关推荐

0 条评论