赵走x博客 - 开发者的网上家园

6、组件：带状态的文本框组件

资源编号:76054 书籍 React快速上手开发热度：82

下面来构建一个新组件。这是一个可以记录已输入字符数的文本框组件

下面来构建一个新组件。这是一个可以记录已输入字符数的文本框组件（如图2-6 所示）。

![bs64](https://img.handsomemark.com/2019/11/09/34a3ab22-02a3-11ea-a6d4-0242ac140002.png)

图2-6：自定义文本框组件的最终效果

你（和其他使用这个可重用组件的人）可以这样使用这个新组件：

```
ReactDOM.render(
        React.createElement(TextAreaCounter,{text:'Bob'}),
        document.getElementById("app")
    );
```

现在让我们一起实现这个组件。我们可以先创建一个类似于上述例子的“无状态”版本，暂不处理状态的更新：

```
 var TextAreaCounter=React.createClass({
        propTypes:{
          text:React.PropTypes.string,
        },
        getDefaultProps:function(){
            return{
                text:''
            }
        },
        render:function () {
            return React.DOM.div(null,
                React.DOM.textarea({defaultValue:this.props.text}),
                React.DOM.h3(null,this.props.text.length)
            )
        }
    });
```

在上述例子中，你可能注意到文本框使用了defaultValue 属性，而不是你在常规HTML 中习惯使用的文本子元素。这是因为React 和传统HTML 在处理表单上有一些细微的区别。我们会在第4 章讨论这一点，不过请放心，二者之间没有太多区别。此外，你将会发现这些不同之处的存在是合理的，会让你的开发体验更加愉悦。

如你所见，这个组件接收一个可选字符串属性text，并使用给定的属性值渲染一个文本框组件，以及一个简单显示字符串长度的<h3> 组件。

![bs64](https://img.handsomemark.com/2019/11/09/c5821eda-02a3-11ea-9024-0242ac140002.png)
图2-7：目前的TextAreaCounter 组件

接下来需要把无状态组件变为带状态的。换句话说，我们要让组件维护某些数据（state）。

这些数据在初始化渲染时需要用到，并且在数据随后发生改变时进行更新（重新渲染）。

在你的组件中实现一个getInitialState() 方法，以保证总是可以合法地取得数据。
```
getInitialState:function(){
          return{
              text:this.props.text
          }  
        },
```
这个组件仅仅需要维护textarea 组件中的文本数据，因此state 只包含一个属性text，该属性可以通过this.state.text 访问。在初始化时（即getInitialState() 函数执行时），仅仅是把text 属性复制过来。随后在数据发生改变时（即用户在文本框中输入内容时），组件可以通过一个辅助方法更新state：

```
_textChange:function(ev){
          this.setState({
              text:ev.target.value
          })
        },
```

改变state 必须使用this.setState() 方法。该方法接收一个对象参数，并把对象与this.state 中已存在的数据进行合并。或许你已经猜到，_textChange() 就是一个事件监听器，可以接收一个事件对象ev 并通过该参数取得文本框的内容。

最后要做的就是在render() 方法中使用this.state 代替this.props，并设置事件监听器：
```
 render:function () {
            return React.DOM.div(null,
                React.DOM.textarea({value:this.state.text,onChange:this._textChange}),
                React.DOM.h3(null,this.state.text.length)
            )
        }
```
现在无论用户何时在文本框中输入数据，计数器的值都会自动反映字符长度的变化（如图2-8 所示）。

![bs64](https://img.handsomemark.com/2019/11/09/3b6fe654-02a4-11ea-b097-0242ac140002.png)
图2-8：在文本框中输入内容