react.js 下获取各种input控件的值 radio、checkbox等

1、在react中可以给输入控件（如input type=text）加上引用名，好获取它的输入值
例如：

<input name="password" ref="password" type="password"  maxLength="8"/>

console.log("password:"+this.refs.password.value)

2、<textarea >控件，它和input不同，它是开标签，内容是包括在<textarea >和</textarea>之间的。如果需要获取<textarea >的值，同样可以用ref来获取
例如:

<textarea ref="jianjie" >我是一个很幽默的人，最爱大白兔</textarea>

console.log("简介:"+this.refs.jianjie.value); 

注意：这里log出来的是页面用户输入后的最终文字。

3、单选radio和多选checkbox，获取它们的值最好还是用一个公共变量如state来保存，因为它们的值只能在触发事件中获取，不像text控件可以后期提交时获取。初始值可以通过 defaultChecked={true} 来设置。

radio例子：

changeColor(e){
    console.log(e.target.value);
},
render(){
return(
<div onChange={this.changeColor}>
   <h2>选择你喜欢的颜色</h2>    
    <input type="radio" id="color1" name="color" value="red" /> 
    <label htmlFor="color1" >red</label>

    <input type="radio" id="color2" name="color" value="yellow"/>
    <label htmlFor="color2">yellow</label>

    <input type="radio" id="color3" name="color" value="green"/>
    <label htmlFor="color3">green</label>
</div>
)
}

如果是checkbox，用div包住不合适，因为div每次点击只能获取点击一次的值。所以checkbox需要写到每个checkbox 控件里面的onChange或onClick事件。可以通过一个state的数组来存储变更。checkbox例子：

changeColor(e){
    this.setState({color:e.target.value});
},
render(){
return(
<input type="checkbox" id="color1" name="color" value="red" onChange={this.changeColor} />
<label htmlFor="color1" >red</label>

<input type="checkbox" id="color2" name="color" value="yellow" onChange={this.changeColor} />
<label htmlFor="color2">yellow</label>

<input type="checkbox" id="color3" name="color" value="green" onChange={this.changeColor}  />
<label htmlFor="color3">green</label>
)
}