第十章 React中的非受控组件和受控组件

 <!-- 准备好员工“容器” -->
  <div id="app"></div>
  <!-- 引入ReactJS核心库 -->
  <script type="text/javascript" src="../JS/react.development.js"></script>
  <!-- 引入React-DOM核心库，用于操作DOM -->
  <script type="text/javascript" src="../JS/react-dom.development.js"></script>
  <!-- 引入Babel，用于编译jsx为js -->
  <script type="text/javascript" src="../JS/babel.min.js"></script>
  <!-- 此处类型为babel -->
  <script type="text/babel">
    // react 内容
  </script>

 class Login extends React.Component {
      render () {
        return (
          <form action="http://example.com">
           用户名： <input type="text" name="username"/>
           密码： <input type="password" name="password"/>  
            <button> 登录 </button>
          </form>
        )
      }
    }
 // 2、将虚拟DOM渲染到页面，标签必须闭合
 ReactDOM.render(<Login />,document.getElementById('app'))

class Login extends React.Component {
      loginFunc = (event) => {
        // 阻止表单默认行为
        event.preventDefault()
        // 获取输入框节点
        const { username, password } = this
        // 获取输入框的值
        const data = {
          username: username.value,
          password: password.value
        }
        console.log('表单数据',data)
      }
      render () {
        return (
          <form onSubmit={this.loginFunc}>
           用户名： <input ref={c => this.username = c} type="text" name="username"/>&nbsp;
           密码： <input ref={c => this.password = c} type="password" name="password"/>  
            <button>登录</button>&nbsp;
          </form>
        )
      }
    }
    // 2、将虚拟DOM渲染到页面，标签必须闭合
    ReactDOM.render(<Login />,document.getElementById('app'))

class Login extends React.Component {
      // 初始化状态
      state = {
        username: '',
        password: ''
      }
      loginFunc = (event) => {
        // 阻止表单默认行为
        event.preventDefault();
        // 从状态里面获取表单数据
        const { username, password } = this.state
        // 获取输入框的值
        const data = {username, password }
        console.log('表单数据', data)
      }
      getUsername = (event) => {
        // 从事件源中获取用户名
        this.setState({ username: event.target.value })
      }
      getPassword = (event) => {
        // 从事件源中获取密码
        this.setState({ password: event.target.value })
      }
      render () {
        return (
          <form onSubmit={this.loginFunc}>
            用户名： <input onChange={this.getUsername} type="text" name="username" />
            密码： <input onChange={this.getPassword} type="password" name="password" />
            <button>登录</button>&nbsp;
          </form>
        )
      }
    }
    // 2、将虚拟DOM渲染到页面，标签必须闭合
    ReactDOM.render(<Login />, document.getElementById('app'))