您的当前位置:首页正文

第十章 React操作表单

2024-11-10 来源:个人技术集锦


在这章里,开始学习React中如何操作表单。

一、一个简单的实例

本例中设置输入框 input value = {this.state.data},当在输入框值发生变化时,可以使用 onChange 事件来监听 input 的变化,并修改 state,状态值的改变即刻渲染到页面上。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>React中的表单操作</title>

    <script src="js/react.min.js"></script>

    <script src="js/react-dom.min.js"></script>

    <script type="text/javascript"src="js/browser.min.js" ></script>

    <script type="text/javascript"src="js/jquery-2.1.0.min.js"></script>

  </head>

  <body>

    <div id="hello"></div>

        <script type="text/babel">

   var HelloForm = React.createClass({

  getInitialState: function() {

    return {username: 'afeng',userpwd:'afeng2'}

         

  },

  handleChange: function(e) {

    this.setState({username: e.target.value});

  },

  handlePwdChange: function(e) {

    this.setState({userpwd: e.target.value});

  },

  render: function() {

    var username = this.state.username;

     var userpwd = this.state.userpwd;

    return <div>

<input type="text" value={username} onChange={this.handleChange} />

<br/>

      <input type="password" value={userpwd} onChange={this.handlePwdChange} />

            <h4>{username}</h4>

            <h4>{userpwd}</h4>

           </div>;

  }

});

ReactDOM.render(

  <HelloForm />,

  document.getElementById('hello')

);

    </script>

  </body>

</html>

二、综合案例

从上面的例子可知,一个input要对应handleChange方法,显然不合适的,下面的例子合成一个函数处理。

 <!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>表单详解</title>

</head>

 <script src="js/react.min.js"></script>

    <script src="js/react-dom.min.js"></script>

    <script type="text/javascript"src="js/browser.min.js" ></script>

<body>

<div id="reactDemo"></div>

    <script type="text/babel">

 var ReactForm = React.createClass({

    getInitialState:function(){

        return {

            username:'ReactDemo',

            gender:'man',

            checked:true

        };

    },

    handleChange:function(event){

        var newState={};

       newState[event.target.name]=event.target.name=="checked"?event.target.checked:event.target.value;

        this.setState(newState);

    },

    submitHandler:function (e) {

      

        console.log(this.state);

    },

    render:function () {

        return <form onSubmit={this.submitHandler}  action="" method="get">

            <label htmlFor="username">请输入用户名</label>

            <input type="text" name="username" onChange={this.handleChange} value={this.state.username} id="username"/>

            <br/>

            <select name="gender" onChange={this.handleChange} value={this.state.gender}>

                <option value="man"></option>

                <option value="woman"></option>

            </select>

            <br/>

            <label htmlFor="checkbox">全选</label>

            <input type="checkbox" value="全选" checked={this.state.checked} onChange={this.handleChange} name="checked" id="checkbox"/>

            <button type="submit">提交</button>

        </form>

    }

});

ReactDOM.render(<ReactForm/>,document.getElementById('reactDemo'));

</script>

</body>

</html>

需要注意的是,在submitHandler中,如果加入如下代码,则不会提交数据。

e.preventDefault();

 

显示全文