ReactJS表单组件

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

 

2、交互属性

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

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事件。

 

3、受限组件

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

render：function(){

return <inptut type="text" value="hello"/>

}

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

 

getInitialState:funtion(){

return {value:‘hello’}；

},

 

handleChange：function（event）{

this.setState({value:event.target.value});

 

},

render:function(){

var value= this.state.value;

return <input type="text" value={value} onChange={this.hanleChange} />

}

 

以上代码中，React将用户输入的值更新到<input>组件的value属性。这样实现响应或者验证用户输入的界面就很容易了。例如：

handleChange：function(event){

this.setState({value:event.target.value.substr(0,140)});

}

以上代码接受用户输入，并截取前140个字符。

 

4、不受限组件

没有设置value（或者设为null）的<input>组件是一个不受限组件。对于不受限的<input>组件，渲染出来的元素直接反应用户输入。例如：

render：function（）{

return<Input type="text"/>

}

以上代码将是一个没有任何内容过的空的输入框，用户输入将理解反映到元素上。和受限元素一样，使用onChange事件可以监听值的变化。

如果想给组件设置一个非空的初始值，可以使用defaultValue属性。例如：

render：function（）{

return <input type="text" defaultValue="Hello" />;

}

以上代码渲染出来的元素和受限组件一样有一个初始化的值，但是这个值可以改变并反应到页面上。

同样的类型为radio、checkbox、的<ingput>支持defaultChecked属性，<select>支持defaultValue属性。

  render: function() {

      return (

          <div>

            <input type="radio"name="opt" defaultChecked /> Option 1

            <input type="radio"name="opt" /> Option 2

            <select defaultValue="C">

              <optionvalue="A">Apple</option>

              <optionvalue="B">Banana</option>

              <optionvalue="C">Cranberry</option>

            </select>

          </div>

      );

    }

 

5、使用受限组件的原因

在React中使用<input>的表单组建时，遇到传统的HTML中没有的阻碍，例如：<input type="text"name="title" value ="Untitled" />

 

在HTML 中将渲染初始值为 Untitled 的输入框。用户改变输入框的值时，节点的 value属性（property）将随之变化，但是 node.getAttribute('value') 还是会返回初始设置的值 Untitled.

与HTML 不同，React 组件必须在任何时间点描绘视图的状态，而不仅仅是在初始化时。比如在 React 中：

render:function() {

 return <input type="text"name="title"value="Untitled"/>;

}

该代码在任何时候渲组件之后输入框都是Untitled

 

6、为什么<textarea>使用value属性？

在HTML中，<textarea>的值通常使用子节点设置：

//这样是错误的，在React中textarea不可以在textarea标签内写入子节点

<textarea name=“description”>This is thedescription.</textarea>

对 HTML 而言，让开发者设置多行的值很容易。但是，React 是JavaScript，没有字符限制，可以使用 \n 实现换行。简言之，React 已经有 value、defaultValue 属性，</textarea> 组件的子节点扮演什么角色就有点模棱两可了。基于此，设置<textarea> 值时不应该使用子节点：

<textarea name="description" value="Thisis a description."/>如果非要*使用子节点，效果和使用 defaultValue 一样。

 

7、为什么<select>使用value属性

HTML中<select>通常使用<option>的selected属性设置选中状态；React为了更好的控制组件，采用以下方式代替：

<select value="B">

<option value="A">Apple</option>

<option value="B">Banana</option>

 <option value="C">Cranberry</option>

 </select>

PS：给 value 属性传递一个数组，可以选中多个选项：<select multiple={true}value={['B', 'C']}>。