React.js中的表单

诸如<input>、<textarea>、<option>这样的表单组件不同于其他组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。

交互属性

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

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

在 HTML 中<textarea>的值通过子节点设置；在 React 中则应该使用 value 代替。
表单组件可以通过onChange回调函数来监听组件变化。当用户做出以下交互时,244)">onChange执行并通过浏览器做出响应：

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

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

对于<input>和<textarea>，onChange应当被用于取代DOM内置的onInput事件处理

不可控组件和可控组件

可控组件

设置了 value 的<input>是一个受限组件。对于受限的<input>，渲染出来的 HTML 元素始终保持 value 属性的值。

render: function() {
    return <input type="text" value="Hello!"/>;
 }

上面的代码将渲染出一个值为 Hello! 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用，因为 React 已经赋值为 Hello!。如果想响应更新用户输入的值，就得使用 onChange 事件

getInitialState: return {value: 'Hello!'};
 },handleChange: function(event) {
    this.setState({value: event.target.value});
 },render: var value = this.state.value;
    {value} onChange={this.handleChange} />;
 }

Default Value

初始值是状态中的value。如果要取数据，可直接使用 var inputValue = this.state.value。

defaultValue={this.state.value}/>;
 }

一个可控组件并不保持自己的原始状态；组件的呈现完全基于属性。

实例

var Kekong = React.creatClass({
    getInitialState:function(){
        return {
            dada:'shuaige'
        }
    },handleChange:function(e){
        this.setState({
            dada:e.target.value
        });
    },submitHandler:function(e){
        e.preventDefault();
        alert(this.state.dada);
    },render:form onSubmit={this.submitHandler}> <{this.state.dada} {this.handleChange} /> <button "submit">speak</button> </form>;
    }
});
ReactDOM.render(<Kekong />,document.body);

不可控组件

没有设置value(或者设为null) 的<input>组件是一个不可控组件。这样的话，组件中的数据和state中的数据并不对应，可以说，组件的数据不可控。

"text" />;
 }

上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受限元素一样，使用 onChange 事件可以监听值的变化。

如果想给组件设置一个非空的初始值，可以使用 defaultValue 属性。数据在这里并没有存贮在状态中，而是写在input中。

"Hello!" />;
 }

如果要拿到input中的value，需先拿到其DOM节点，然后获取其value值

varinputValue = React.findDOMNode(this.refs.input).value

上面的代码渲染出来的元素和受限组件一样有一个初始值，但这个值用户可以改变并会反应到界面上。
同样，<input type="checkBox">和<input type="radio">支持defaultChecked属性，<select>支持设置defaultValue。

defaultValue和defaultChecked属性只能在初始的render函数中使用，如果你要在随后的render函数中更新value值，你需要使用可控组件。

var UnKekong = React.creatClass({ submitHandler:function(e){ e.preventDefault(); var helloUnke = React.findDOMNode(this.refs.helloUnke).value; alert(helloUnke); },0)">onsubmit=ref="helloUnke" "Dada shuaige" /> <form>; } }) React.render(<Unkekong />,document.body);

CheckBox和Radio的潜在问题

注意，在试图改变正常处理CheckBox和Radio input时，React用一个click事件来代替change事件。大多数情况下，这种行为与预期相同，除了调用preventDefault时。preventDefault从视觉上阻止浏览器更新input，即使checked被触发。它可以在移除调用preventDefault与用setTimeout来切换checked中起作用。

Why use Controlled Components

组件可控的优点：

符合React的数据流，单向数据流，从state流向render输出的结果。
数据存贮在state中，便于使用。
便于对数据进行处理

表单元素

React.js学习笔记之JSX解读

提示

属性

<input type="" onChange={this.handleChange}/>
<textarea onChange={this.handleChange}/>
<select onChange={this.handleChange}><option></option></select>

实例

可以去查看实例代码，传送门：React表单Demo

var MyForm = React.createClass({
getInitialState:function(){
    return {
        username:'',gender:'man',checked:true
    };
},handleUsernameChange:function(e){
    this.setState({
        username:e.target.value
    });
},handlerGenderChange:this.setState({
        gender:e.target.value
    });
},handleCheckedChange:this.setState({
        checked:e.target.checked
    });
},0)">function (e) {
    e.preventDefault();
    console.log(this.state);
},0)">function () {
    label htmlFor="username">请输入用户名</label> <{this.handleUsernameChange} {this.state.username} id="username"/> <br/> <select {this.handlerGenderChange} {this.state.gender}> <option "man">男</option> <"woman">女</option> </select> <"checkBox">大大是帅哥吗</"checkBox" "大大是帅哥" checked={this.state.checked} {this.handleCheckedChange} "checkBox"/> <"submit">提交</form> } }); ReactDOM.render(<MyForm />,document.getElementById('reactDemo'));

事件处理函数

onChange={this.handleChange}

若有多个元素要运用事件处理函数，常规的方法是编写多个onChange事件。这么写的话会导致代码维护比较困难并且也非常冗余。更好的做法是把事件处理函数编写为一个。可以采用bind复用和name复用这两种方法。

bind复用

handleChange:function(name,event){
    ......
}
onChagne={this.handleChange.bind(this,'input')}

书写简单，但需要对bind()机制熟悉，性能相对要好。

实例

function(event){
    var name = event.target.name
}
onChange={this.handleChange}

相比Bind写法会少一些参数，在函数中需要读取表单的name值，需要添加name属性。

function(event){ var newState={}; newState[event.target.name]=event.target.name==name="username" {this.handleChange} "gender" "checked" 自定义表单组件

自定义表单组件能让我们更好的使用组件，让我们更好的开发网页。

why 自定义表单组件？

自定义表单组件的原因：

内因：表单本身具备特殊性：样式统一、信息内聚、行为固定
外因：本质上是组件的嵌套，组织和管理组件的一种方式

小结

本文主要简单介绍了表单组件的一些用法。