change some file

HeeBooo · Oct 7, 2017 · b3fa0cc · b3fa0cc
1 parent 295c775
commit b3fa0cc
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 16 deletions.
diff --git a/test14-event2.html b/test14-event2.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title></title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ </head>
+ <body>
+ <div id="root"></div>
+ <script src="./build/react.js"></script>
+ <script src="./build/react-dom.js"></script>
+ <script src="./build/browser.min.js"></script>
+ <script src="./build/jquery.min.js"></script>
+ <script type="text/babel">
+ let TestClickComponent = React.createClass({
+ handleClick: function (event) {
+ // 找到dom节点 findDOMNode 属于ReactDOM的方法
+ let tipE = ReactDOM.findDOMNode(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 ref="tip">测试点击</span>
+ </div>
+ )
+ }
+ });
+ let TestInputComponent = React.createClass({
+ getInitialState: function () {
+ return {
+ inputContent: ''
+ }
+ },
+ handleChange: function (event) {
+ this.setState({
+ inputContent: event.target.value
+ })
+ event.stopPropagation();
+ event.preventDefault();
+ },
+ render: function () {
+
+ return (
+ <div>
+ <input type="text" onChange={this.handleChange}/>
+ <span>{this.state.inputContent}</span>
+ </div>
+ )
+ }
+ })
+ ReactDOM.render(
+ <div>
+ <TestClickComponent />
+ <TestInputComponent />
+ </div>,
+ document.getElementById('root')
+ )
+ </script>
+ </body>
+</html>
diff --git a/test14.html → test15-mixed.html b/test14.html → test15-mixed.html
@@ -12,36 +12,34 @@
  <script src="./build/browser.min.js"></script>
  <script src="./build/jquery.min.js"></script>
  <script type="text/babel">
- let TestClickComponent = React.createClass({
+ let Title = React.createClass({
  render: function () {
- return (
- <div>
- <button>显示|隐藏</button>
- <span>测试点击</span>
- </div>
- )
+ return <h1>{this.props.title}</h1>
  }
- });
- let TestInputComponent = React.createClass({
+ })
+ let Href = React.createClass({
+ render: function () {
+ return <a href={this.props.href}>{this.props.href}</a>
+ }
+ })
+ let Website = React.createClass({
  getInitialState: function () {
  return {
- inputContent: ''
+ title: 'baidu',
+ href: 'www.baidu.com'
  }
  },
  render: function () {
  return (
  <div>
- <input type="text" />
- <span>{this.state.inputContent}</span>
+ <Title title={this.state.title} />
+ <Href href={this.state.href} />
  </div>
  )
  }
  })
  ReactDOM.render(
- <div>
- <TestClickComponent />
- <TestInputComponent />
- </div>,
+ <Website />,
  document.getElementById('root')
  )
  </script>

diff --git a/test6.html → test6-defaultProps.html b/test6.html → test6-defaultProps.html
diff --git a/test7.html → test7-event0.html b/test7.html → test7-event0.html
diff --git a/test8.html → test8-event1.html b/test8.html → test8-event1.html