<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<script?src="./JS/react.min.js"></script>
????<script?src="./JS/react-dom.min.js"></script>
????<script?src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div?id="container"></div>
<script?type="text/jsx">
????var?TextClickComponent=React.createClass({
????????????handleClick:function?(event)?{
????????????????var?tipE=this.refs.tip;
????????????????if(tipE.style.display==="none"){
????????????????????tipE.style.display="inline";
????????????????}
????????????????else{
????????????????????tipE.style.display="none";
????????????????}
????????????????event.stopPropagation();
????????????????event.preventDefault();
????????????},
????????render:function?()?{
????????????return(
????????????????????<div>
????????????????????????<button?onclick={this.handleClick}>顯示|隱藏</button><span>測(cè)試點(diǎn)擊</span>
????????????????????</div>
????????????)
????????}
????});
????var?TextInputComponent=React.createClass({
????????getInitialState:function?()?{
????????????return{
????????????????inputContent:''
?}
????????},
????????changeHandler:function?(event)?{
????????????this.setState({
????????????????inputContent:event.target.value
????????????});
????????????event.preventDefault();
????????????event.stopPropagation();
????????},
????????render:function?()?{
????????????return(
????????????????????<div>
????????????????????????<input?type="text"?onchange={this.changeHandler}/><span>{this.state.inputContent}</span>
????????????????????</div>
????????????);
????????}
????});
????ReactDOM.render(
????????????<div>
????????<TextClickComponent/>
????????????????<br/><br/>
????????<TextInputComponent/>
????</div>,
????????????document.getElementById('container'));
</script>
</body>
</html>
2018-01-03
span標(biāo)簽少了個(gè) ref ,? ?<span ref="tip">測(cè)試點(diǎn)擊</span>