09react 之 表单组件

Posted 2020-10-02 yezixuan

不太清楚有多少初学React的同学和博主当时一样，在看完React的生命周期、数据流之后觉得已经上手了，甩开文档啪啪啪的开始敲了起来。结果...居然被一个input标签给教做人了。

 

故事是这样的：首先你创建了一个input标签

var React = require(\'react\'),
    ReactDOM = require(\'react-dom\');

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

ReactDOM.render(<Text />, document.querySelector(\'#container\'));

一切都是如此的轻松自然，接着由于需求你给input上设置了一个默认值：

<input value=\'123\' type=\'text\' />

突然你发现，唉我擦！输入框里的值不能改动了，删也删不掉。你以为电脑卡死了，刷新了几遍还是这样。然而把value删除就复原了，你不得不又返回去看文档。

原理：在React中表单组件分为约束组件和无约束组件两种。

　　- 无约束组件，是指其value值不通过的props或者state来设置，仅由其自身来决定。表单组件的值的变化也不会被记录，只能通过找到DOM节点的方式来获取。

　　- 约束组件，是React中推荐的表单的使用方式。表单组件的值并不是由其自身决定，而是通过父组件传递或者本身的state来控制。其内容的每次变化都会被保存，需要时仅需要通过this.state便能获取。

约束状态的input组件写法如下：

 class Test extends React.Component{
    constructor(props){
        super(props);
        this.handerChange = this.handerChange.bind(this);
    }
    handerChange(event){
        let newVal = event.target.value;
        console.log(newVal);
        this.setState({
            text:newVal
        });
    }
    render(){
        return (
            <input type="text" value={this.props.text} onChange={this.handerChange}/>
        );
    }
 }
  ReactDOM.render(<Test/>,document.getElementById(\'example\'))

上例中，我们监听了input的onchange事件，每一次内容的更改实际上是更改组件的state属性，通过state的变化来触发DOM元素的变化。

React之所以这么做的原因，是因为React其实为一个状态机，页面上所有的DOM元素的状态都需要被其所知所控制。

在继续理解表单组件之前，组件的state是必须被开发者所理解的。通常很多人喜欢将state与props一起讲解，这里博主认为通过state在表单组件的实际应用讲解可能更加直观。

State

每一本介绍React的书或文档都会把state和props放在一起详细的比较，其实最简单的说：state是组件内部用来控制组件状态的属性，props是组件之间用来通信的属性。

创建

state是通过名为getInitialState的生命周期函数创建的，其return出一个对象作为state值。如果你申明了该函数却没有返回值是会报错的。

创建之后，在组件内部的所有函数都可以用 this.state.属性名 来访问该属性。

修改

state的值并不是固定的，开发都通过在合适的时机改变它从而达到改变页面展示的目的。

改变state的唯一是this.setState，该方法可以说是整个React系统的"扳机"，正常情况(除了直接操作DOM)下所有的页面更新都是由这个方法来触发的。

 class Test extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            text: "init text",
            }
        this.handerChange = this.handerChange.bind(this);
    }
   
    handerChange(event){
        let newVal = event.target.value;
        this.setState({
            text:newVal
        });
    }
    render(){
        return (
            <input type="text" value={this.state.text} onChange={this.handerChange}/>
        );
    }
 }
  ReactDOM.render(<Test/>,document.getElementById(\'example\'))

这里就是有关state很重要的一点：绝对不要直接更改state的值，只通过setState来改变。否则会因为多个地方多次对state更改，导致不统一。从而引发一些不必要的问题。

当state里有多个属性，如果需要更新某一个组件不用更新state里所有的属性，只更新需要的就好：

{name: \'lilei\', age: 25, sex: \'男\'} //state

this.setState({name: \'hanmeimei\', sex: \'女\'}); //state:{name: \'hanmeimei\', age: 25, sex: \'女\'}

更新时机

既然setState是React的扳机，那它就不能随便在哪里都开枪。可能这部分东西需要对React的生命周期有一定掌握，许多文档和博客里都写得很详细。我这里就不再抄书了。 

通常调用setState都是在人工触发的事件里，比如上例中的handlerClick。但总有需要自动触发的情形。生命周期主要分为创建、更新和销毁三个阶段。

　　- 首先，在任何阶段的render函数里都是不可以调用setState来触发更新的。

　　- 创建阶段，一般是在componentWillMount以及componentDidMount这两个生命周期函数中调用，前者表示React即将渲染真实DOM前的一个阶段，也是最后的修改state的机会。后者表示真实DOM已经渲染完成，在页面中能看到我们的组件了，这里再调用setState就会触发组件的一次更新。在实际开发中通常用在下面这种情况：(下面是es5的写法)

var Foo = React.createClass({
　　getInitialState:function() {
　　　　return {....};
　　},
　　render: function() {
　　　　return (<..../>);
　　},
　　componentDIdMount: function(){
　　　　AJAX {
　　　　　　this.setState({....});
　　　　}
　　}
});

大意就是首先创建出页面元素，在componentDidMount函数中发起ajax之类的请求，获取数据后通过setState更新页面将数据更新到页面中。

这样做的好处就是在请求较慢或者请求失败的情况下，页面不至于留白，影响用户体验。

　　- 更新阶段，绝...对...不...要...在...这...个...阶...段...调...用。因为如果在该阶段任意一个生命周期函数中使用setState触发页面更新时，组件又会再次进入生命周期的更新阶段，这里会再次调用setState方法，然后进入死循环。

　　- 销毁阶段，就更不用说了，组件都没得了，还更新个毛啊。

了解完了state，继续看input的无约束组件。

<input defaultValue="123" />

如果设置了defaultValue属性，该组件就是无约束组件。此时可以直接设置input的默认值，设置之后内容可以直接进行更改。缺点是这个属性貌似只能设置一次，重复设置无效。

如果你不想为约束组件编写如上那些繁琐的过程，React提供了简单的方法——mixin。

 

mixin

简单来说mixin是用来抽象某一功能的工具，将逻辑抽象出来，使其可以在多个组件里复用。除了自定义以外，官方已经封装了一系列的mixin组件，使用前需要引入react-with-addons文件。

var Form = React.createClass({
　　mixins: [React.addons.LinkedStateMixin],
　　getInitialState: function() {
    　　return {userName: \'\', passWord: \'\'};
　　},
　　render: function() {
    　　return (<div>
　　　　　　　　　　<form>
　　　　　　　　　　　　<input type=\'text\' valueLink={this.linkState(\'userName\')} placeholder=\'用户名\'  />
　　　　　　　　　　　　<input type=\'password\' valueLink={this.linkState(\'passWord\')} placeholder=\'密码\' />
　　　　　　　　　　</form>
　　　　　　　　</div>);
　　}
});

如上引入mixin组件后，只需要在input的特殊属性valueLink中调用this.linkState(\'属性名\')，之后每次对input内容的更改就会同步到组件state中同名的属性中。

其实LinkedStateMixin内部的实现跟我们Test那个示例组件里是一样的，看懂了那段代码就能理解这个mixin插件的内部原理了。

*虽然使用mixin可以简化书写流程，但是使用这种方式往数据流中添加定制功能时，复杂度会增加，建议只在特定场景下使用。传统的约束表单组件更加灵活。

下面介绍下其他表单组件的内容

 

Label

label元素是表单中很重要的一个部分，由于for在javascript中是一个保留字，所以在JSX中for属性更改为htmlFor。

<label htmlFor=\'name\'>姓名</label>

 

Textarea

与传统的HTML相比，在React中，textarea被修改为更像input的形式。

<textarea value={this.state.value} />

textarea的约束组件的使用方法与input一致，同时也可以使用同一个mixin。

<textarea valueLink={this.linkState(\'value\')} />

使用defaultValue属性同样可以将textarea变为无约束组件。

<textarea defaultValue=\'请输入内容\' />

 

Select

在React中select与textarea一样，相比HTML也作了一些修改，使它们操作起来更简便。

无约束组件：

<select defaultValue=\'B\'>
　　<option value=\'A\'>AAA</option>
　　<option value=\'B\'>BBB</option>
　　<option value=\'C\'>CCC</option>
</select>

约束组件：

var SelectComponent= React.createClass({
　　getInitialState: function() {
　　　　return {option: \'A\'};
　　},
　　render: function() {
　　　　return (<select value={this.state.option} onChange={this.handlerChange}>
　　　　　　　　　　<option value=\'A\'>A</option>
　　　　　　　　　　<option value=\'B\'>B</option>
　　　　　　　　　　<option value=\'C\'>C</option>
　　　　　　　　</select>);
　　},
　　handlerChange: function(event) {
　　　　this.setState({option: event.target.value});
　　}

 

单选

约束组件：

var Radio = React.createClass({
　　getInitialState: function() {
　　　　return {gender: \'男\'};
　　},
    render: function() {
　　　　return (<div>
　　　　　　　　　　<input type=\'radio\' name=\'gender\' value=\'男\' checked={this.state.sex == \'男\'} onChange={this.handlerChange} />男
　　　　　　　　　　<input type=\'radio\' name=\'gender\' value=\'女\' checked={this.state.sex == \'女\'} onChange={this.handlerChange} />女
　　　　　　　　</div>);   
　　},
　　handlerChange: function(event) {
　　　　this.setState({gender: event.target.value});
　　}
});

设置单选的defaultChecked会使其变为无约束组件。

<input type=\'radio\' defaultChecked=\'true\' />

 

复选

约束组件：

var CheckBox = React.createClass({
　　getInitialState: function() {
　　　　return {basketBall: false, swim: false, sing: false};
　　},
　　render: function() {
　　　　return (<div>
　　　　　　　　　　<p>爱好：</p>
　　　　　　　　　　<input type=\'checkbox\' checked={this.state.basketBall} value=\'basketBall\' onChange={this.handlerChange} />篮球
　　　　　　　　　　<input type=\'checkbox\' checked={this.state.swim} value=\'swim\' onChange={this.handlerChange} />游泳
　　　　　　　　　　<input type=\'checkbox\' checked={this.state.sing} value=\'sing\' onChange={this.handlerChange} />唱歌
　　　　　　　　</div>);   
　　},
　　handlerChange: function(event) {
　　　　var type = event.target.value,
　　　　　　 checked = event.target.checked,
　　　　　　 newState = {};
　　　　newState[type] = checked;
　　　　this.setState(newState);
　　}
});

在handlerCheck函数中有一点要注意，我创建了一个中间变量newState。

handlerCheck: function(event) {
　　var type = event.target.value,
　　　　 checked = event.target.value;
　　this.setState(type: checked); //state: {basketBall: false, swim: false, sing: false, type: true}
}

如果像上面的写法，type并不会作为变量，而是作为字符串解析。每当你在setState时遇到困难时，尝试中间变量，这方法百试不爽。

无约束组件：

<input type=\'checkbox\' defaultChecked=\'true\' />

 

多表单元素与change事件处理

在实际开发中通常有多个表单组件，为了使一个change处理器能处理所有的表单组件变化，可以使用bind方法来绑定类型。

var FormComponent = React.createClass({
　　getInitialState: function() {
　　　　return {name: \'\', gender: \'男\'};
　　},
　　render: function() {
　　　　return (<form>
　　　　　　　　　　<input type=\'text\' value={this.state.name} onChange={this.handlerChange.bind(this,\'name\')} />
　　　　　　　　　　<label htmlFor=\'male\'>男</label>
　　　　　　　　　　<input id=\'male\'
　　　　　　　　　　　　　　name=\'gender\'
　　　　　　　　　　　　　　type=\'radio\'
　　　　　　　　　　　　　　value=\'男\'
　　　　　　　　　　　　　　checked={this.state.gender == \'男\'}
　　　　　　　　　　　　　　onChange={this.handlerChange.bind(this,\'gender\')} />
　　　　　　　　　　<label htmlFor=\'female\'>女</label>
　　　　　　　　　　<input id=\'female\'
　　　　　　　　　　　　　　name=\'gender\'
　　　　　　　　　　　　　　type=\'radio\'
　　　　　　　　　　　　　　value=\'女\'
　　　　　　　　　　　　　　checked={this.state.gender == \'女\'}
　　　　　　　　　　　　　　onChange={this.handlerChange.bind(this,\'gender\')} />
　　　　　　　　</form>);
　　},
　　handlerChange: function(type, event) {
　　　　var newState = {};
　　　　newState[type] = event.target.value;
　　　　this.setState(newState);
　　}
});

 

表单是React初学者很容易踩的大坑，但是对表单组件的学习可以很快的理解state属性。

转载：http://www.cnblogs.com/ghost-xyx/p/5253567.html