var Style = {
backgroundColor: '#fff'
};
class Test extends React.Component {
constructor(...args) {
super(...args);
this.state = {
name: '访问者'
};
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e){
let name = e.target.value;
this.setState({
name: name
});
};
handleClick(e){
// console.log(e.target.value);
console.log(this.refs.btn);
alert("smg");
};
render(){
return(
<div>
<input type="text" onChange={this.handleChange} />
<p>你好，{this.state.name}</p>
<button ref="btn" onClick={this.handleClick} style={Style}>xxx</button>
</div>
);
}
};
const divStyle = {
color: "red",
backgroundColor: '#7F7',
fontSize: 36,
textShadow: "5px 6px 7px #f0f"
};
class MyTitle extends React.Component {
render() {
return(<h1 style={divStyle}>Hello World</h1>);
}
};
ReactDOM.render(
<div>
<Test />
<MyTitle />
</div>,
document.getElementById('app')
);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<div id="app">
</div>
</body>
</html>
