react-base-demos
/
18-表单和受控组件.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 注意: 先引入 react基础库,再引入react dom解析库 -->
  <script src="lib/react/react.development.js"></script>
  <script src="lib/react/react-dom.development.js"></script>
  <script src="lib/babel.min.js"></script>
</head>
<body>
  <!-- 创建react解析的容器 -->
  <div id="root"></div>
  <script type="text/babel">
    class HelloWorld extends React.Component {
      constructor(){
        super();
        this.inputUsernameRef = React.createRef();
        this.state = {
          uname: '',
          password: '123',
          sex: '0', // 0 男, 1 女
          exp: '0', // 0 无, 1 1-3年 , 2 3-5年
          likes: ['0'] // 标识被选中的爱好
        }

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handlePwdChange = this.handlePwdChange.bind(this);
        this.handleSexChange = this.handleSexChange.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleLikeInputChange = this.handleLikeInputChange.bind(this);
      }
      handleSubmit(e){
        // 阻止默认跳转
        e.preventDefault();
        // 本质上还是DOM操作
        // var inputEl = this.inputUsernameRef.current;
        // console.log('username',inputEl.value);
        console.log('username',this.state.uname);
        console.log('password',this.state.password);
        console.log('sex',this.state.sex);
        console.log('exp',this.state.exp);
        console.log('likes',this.state.likes);
      }
      // 用于响应 password表单变化 到state
      handlePwdChange(e){
        this.setState({
          password: e.target.value
        })
      }
      handleSexChange(e){
        // radio是需要根据是否被checked来判断值得
        var isCheck = e.target.checked;
        if(isCheck){
          this.setState({
            sex: e.target.value
          })
        }
      }
      // 用于统一处理常规表单元素的变化
      handleInputChange(key,e){
        var value = e.target.value;
        // 修改谁?  key是谁,就修改谁!
        this.setState({
          [key]: value
        })
      }
      // 单独处理多选特殊组件
      handleLikeInputChange(e){
        //如果被选中,则应该添加state,否则删除state
        // 注意: 不能直接修改state中的对象类型,必须先克隆(因为对象是指针,如果修改相当于直接修改state了)
        var likes = [...this.state.likes];
        var value = e.target.value;
        if(e.target.checked){
          likes.push(value);
        }else{
          // 删除某个元素. 如果数据量很小,可以使用filter过滤
          likes = likes.filter(item=> item != value);
        }
        this.setState({
          likes
        })
      }
      render(){
        return (
          <div>
            <form action="/abc" onSubmit={this.handleSubmit}>
              {/*
                用户名: <input type="text" ref={this.inputUsernameRef}/> <br/>
              */}
               用户名: <input type="text" value={this.state.uname} onChange={e=> this.handleInputChange('uname',e)}/> <br/>
               密码: <input type="text" value={this.state.password} onChange={this.handlePwdChange}/> <br/>
               性别:
                  男: <input type="radio" name="sex" value="0" checked={this.state.sex == '0'} onChange={this.handleSexChange}/> &nbsp;&nbsp;
                  女: <input type="radio" name="sex" value="1" checked={this.state.sex == '1'} onChange={this.handleSexChange}/> <br/>
                经验:
                  <select name="exp" value={this.state.exp} onChange={e=>this.handleInputChange('exp',e)}>
                    <option value="0">无</option>
                    <option value="1">1-3年</option>
                    <option value="2">3-5年</option>
                  </select><br/>
                愛好:
                   <input name="like" type="checkbox" checked={this.state.likes.indexOf('0')!=-1} value="0" onChange={this.handleLikeInputChange}/> 篮球
                   <input name="like" type="checkbox" checked={this.state.likes.indexOf('1')!=-1} value="1" onChange={this.handleLikeInputChange}/> 足球
                   <input name="like" type="checkbox" checked={this.state.likes.indexOf('2')!=-1} value="2" onChange={this.handleLikeInputChange}/> 乒乓球
                  <br/>

                  <input type="submit" value="提交" />
            </form>
          </div>
        )
      }
    }
    // 使用react 相关api 渲染到容器
    ReactDOM.render(<HelloWorld />,document.getElementById('root'));
  </script>
</body>
</html>