reactjs爬坑记9

第九章
表单
给定相同的props和state，任何React组件都会渲染出相同的结果。

React中，表单组件有l两种类型：约束组件和无约束组件

对于复杂的表单组件还是需要访问他们的DOM。

1. 无约束组件
   给定<input /> 一个值，这个<input />的值是可以改变的。
   无约束组件的构造与React中大多数组件相比是反模式的。
   可以通过defaultValue设置默认值

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

   MyForm的value并非由父组件设置，而是由<input/>自己控制的.

   var MyForm = React.createClass({
   
       submitHandler: function(event) {
         event.preventDefault();
         var hehe = this.refs.hehe.getDOMNode().value;
         alert(hehe);
       },
   
       render: function(){
         return(
           <form onSubmit={this.submitHandler}>
   
             <input type="text" ref="hehe" defaultValue="hehehe" />
   
             <button type="submit">click me to submit</button>
   
             </form>
         )
       }
     });

   访问无约束组件的值，可以通过ref。

2. 约束组件
   表单组件的状态由React控制，状态值被存储在React组件的state中。

   var MyForm = React.createClass({
   
       getInitialState: function() {
         return {
           helloTo: "hello kitty"
         };
       },
   
       handleChange: function(event) {
         console.log(event.target),
           this.setState({
           helloTo: event.target.value
         });
       },
   
       submitHandler: function(event) {
         event.preventDefault();
         alert(this.state.helloTo);
       },
   
       render: function() {
         return (
           <form onSubmit={this.submitHandler}>
             <input type="text" value={this.state.helloTo} onChange={this.handleChange}/>
             <button type="submit">click me~</button>
             </form>
         )
       }
     });

   <input />中的值存储在父组件的state中，数据流有了清晰的定义。
   口。

所有合成事件都提供了event.target来访问触发事件的DOM节点。这是访问约束组件的值得最简单的方式之一。

文本框和Select
<textarea />被改的更像<input />了，允许我们设置value和defaultValue。

 <textarea defaultValue="无约束textarea" />
 <textarea value={this.state.helloTo} onChange={this.handleChange} />

<select/>接受value和defaultValue来设置选项。

//无约束
<select defaultValue="B">
    <option value="A">First Option</option>
    <option value="B">Second Option</option>
    <option value="C">Third Option</option>
</select>

//约束
<select value={this.state.helloTo} onChange={this.handleChange}>
    <option value="A">First Option</option>
    <option value="B">Second Option</option>
    <option value="C">Third Option</option>
</select>

//Demo 过滤哪些选项被选中了
var MyForm = React.createClass({

  getInitialState: function() {
    return {
      options: ["B"]
    };
  },

  handleChange: function(event) {
    var checked = [];
    var sel = event.target; //获取 select节点
    for (var i = 0; i < sel.length; i ++) {
      var option = sel.options[i]; //获取加点中的每个option
      console.log(option + "-----------" + i);
      if(option.selected) { //判断哪个option被选中
        checked.push(option.value);
      }
    }

    this.setState({
      options: checked
    });
    console.table(this.state.options);
  },

  submitHandler: function(event) {
    event.preventDefault();
    alert(this.state.options);
  },

  render: function() {
    return (
      <form onSubmit={this.submitHandler}>
        <select multiple="true" onChange={this.handleChange} value={this.state.options}>
          <option value="A">First Option</option>
          <option value="B">Second Option</option>
          <option value="C">Third Option</option>
        </select>
        <button type="submit">click me to submit</button>
      </form>
    );
  }

});

复选框和单选框
复选框和单选框使用的则是另外一种完全不同的控制方式。
在HTML中，复选框和单选框的值是不变的，只有checked的状态会变化。要控制单选框和复选框，就要控制他们的checked属性。也可以在非约束的复选框或单选框中使用defaultChecked。
//无约束

var MyForm = React.createClass({

      submitHandler: function(event) {
        event.preventDefault();
        alert(this.refs.checked.checked);
      },

      render: function() {
        return (
          <form onSubmit={this.submitHandler}>
            <input type="checkbox" ref="checked" value="A" defaultChecked="true"/>
            <button type="submit">click me to submit</button>
          </form>
        );
      }
    });
    //约束

    var MyForm = React.createClass({

      getInitialState: function() {
        return {
          checked: true
        };
      },

      handleChange: function(event) {
        this.setState({
          checked: event.target.checked
        });
      },

      submitHandler: function(event) {
        event.preventDefault();
        alert(this.state.checked);
      },

      render: function() {
        return (
          <form onSubmit={this.submitHandler}>
            <input type="checkbox" value="A" checked={this.state.checked} onChange={this.handleChange}/>
            <button type="submit">click me to Submit</button>
          </form>
        )
      }

    });

表单元素的name属性
• name属性可以让第三方表单序列化类库在React中正常工作。
• 对于仍然使用传统提交方式的表单来说，name属性是必需的。
• 在用户的浏览器中，name被用在自动填写常用信息中，比如用户地址等。
• 对于非约束的单选框来说，name是有必要的，它可作为这些组件分组的依据，确保在同一时刻，同一个表单中拥有同样name的单选框只有一个可以被选中。如果不使用name属性，这一行为可以使用约束的单选框实现。
//下面例子把状态存储在MyForm组件中，实现了非约束单选框具备的分组功能（无name属性）

var MyForm = React.createClass({

      getInitialState: function() {
        return{
          radio: "B"
        };
      },

      handleChange: function(event) {
        this.setState({
          radio: event.target.value
        });
      },

      submitHandler: function(event) {
        event.preventDefault();
        alert(this.state.radio);
      },

      render: function() {
        return(
          <form onSubmit={this.submitHandler}>
            <input type="radio" value="A" checked={this.state.radio == "A"} onChange={this.handleChange}/> <br/>
            <input type="radio" value="B" checked={this.state.radio == "B"} onChange={this.handleChange}/> <br/>
            <input type="radio" value="C" checked={this.state.radio == "C"} onChange={this.handleChange}/> <br/>

            <button type="submit">Click Me to Submit</button>
          </form>
        );
      }
    });

多个表单元素与change处理器