reactjs入门到实战（八）----表单组件的使用

表单组件支持几个受用户交互影响的属性：

  • value，用于 <input>、<textarea> 组件。
  • checked，用于类型为 checkbox 或者 radio 的 <input> 组件。
  • selected，用于 <option> 组件。

在 HTML 中，<textarea> 的值通过子节点设置；在 React 中则应该使用 value 代替。

表单组件可以通过 onChange 回调函数来监听组件变化。当用户做出以下交互时，onChange 执行并通过浏览器做出响应：

  • <input> 或 <textarea> 的 value 发生变化时。
  • <input> 的 checked 状态改变时。
  • <option> 的 selected 状态改变时。

和所有 DOM 事件一样，所有的 HTML 原生组件都支持 onChange 属性，而且可以用来监听冒泡的 change 事件

受限组件：你修改之后不起作用需要通过oncahnge来响应

input textarea  select是一样的

var Hello = React.createClass({
       render:function(){
         return(
            <input type="text" value="Hello" />
         );
       }
     });


     ReactDOM.render(
      < Hello />,document.getElementById('example')
     )

不起作用的：需要改成

<script type="text/babel">
     var Hello = React.createClass({
       getInitialState: function() {
          return {value: 'Hello!'};
      },
      handleChange: function(event) {
        this.setState({value: event.target.value});
      },
      render: function() {
        return <input type="text" value={this.state.value} onChange={this.handleChange} />;
      }
     });


     ReactDOM.render(
      < Hello />,document.getElementById('example')
     )
  </script>
<script type="text/babel">
     var Hello = React.createClass({
       getInitialState: function() {
          return {value: 'Hello!'};
      },
      handleChange: function(event) {
        this.setState({value: event.target.value});
      },
      render: function() {
        return <textarea type="text" value={this.state.value} onChange={this.handleChange} />;
      }
     });


     ReactDOM.render(
      < Hello />,document.getElementById('example')
     )
  </script>
<script type="text/babel">
     var Hello = React.createClass({
       getInitialState: function() {
          return {value: 'bj'};
      },
      handleChange: function(event) {
        this.setState({value: event.target.value});
      },
      render: function() {
        return (<select  id="city" name="city" value={this.state.value} onChange={this.handleChange} >
                    <option value='bj'>北京</option>
                    <option value='sh'>上海</option>
                    <option value='tj'>天津</option>
                </select>
      );
      }
     });


     ReactDOM.render(
      < Hello />,document.getElementById('example')
     )
  </script>
<script type="text/babel">
     var Hello = React.createClass({
       getInitialState: function() {
          return {male: true};
      },
      handleGender: function(e) {
     var male = !!(e.target.value == 'MALE');
     this.setState({
       male: male
     });
   },
      render: function() {
        return (
          <input type='radio' name='gender' checked={this.state.male} onChange={this.handleGender} value='MALE' />
         <input type='radio' name='gender' checked={!this.state.male} onChange={this.handleGender} value='FEMALE' />
      );
      }
     });


     ReactDOM.render(
      < Hello />,document.getElementById('example')
     )
  </script>

 

不受限组件：渲染出来的元素直接反应用户输入

posted @ 2016-06-06 16:15  快乐~  阅读(339)  评论(0)  编辑  收藏  举报