react-form渲染

最新推荐文章于 2024-09-10 17:45:18 发布

love_521_

最新推荐文章于 2024-09-10 17:45:18 发布

阅读量304

点赞数

分类专栏： html react

本文链接：https://blog.csdn.net/love_521_/article/details/123698805

版权

html5 react 前端框架

html 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

react

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>form渲染</title>
</head>

<body>
  <div id="app"></div>
  <script src="./lib/babel.min.js"></script>
  <script src="./lib/react.development.js"></script>
  <script src="./lib/react-dom.development.js"></script>
  <script type="text/babel">
    const { Component } = React;
      // const movies = [];

      class Todo extends Component {
        constructor(props) {
          super(props);
          this.state = {
            person: {},
          };
          // this.saveHandle = this.saveHandle.bind(this) // 只会在初始化的时候执行一次
        }
        saveHandle() {
          // this.refs可以获取当前组件内部设置了ref属性的标签
          console.log(this.refs.txtContent.value);
          console.log(this.refs.txtName.value);
        }
        txtChangeHandle(e) {
          // console.log(e.currentTarget.dataset.id);
          // console.log(e.keyCode);
          var id = e.currentTarget.dataset.id;
          console.log(id)
          var { person } = this.state;
          person[id] = e.currentTarget.value;
          this.setState({
            person,
          });
        }
        render() {
          return (
            <div>
              <ul>
                <li>
                  <input
                    ref='txtContent'
                    data-id='content'
                    onChange={this.txtChangeHandle.bind(this)}
                    plcaeholder='请输入代办事项内容'
                  />
                </li>
                <li>
                  <input
                    ref='txtName'
                    data-id='name'
                    onChange={this.txtChangeHandle.bind(this)}
                    plcaeholder='请输入姓名'
                  />
                </li>
                <li>
                  <button onClick={this.saveHandle.bind(this)}>保存</button>
                </li>
              </ul>
            </div>
          );
        }
      }

      class App extends Component {
        render() {
          return (
            <div>
              <h1>我是一个标题</h1>
              <Todo />
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById('app'));
    </script>
</body>

</html>