React：表單
var MyForm = React.createClass({
getInitialState: function(){
return {value:'Hello'};
},
render: function(){
var value = this.state.value;
return (<input type="text" value={value} />);
}
});
var MyForm = React.createClass({
getInitialState: function(){
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.handleChange}/>);
}
});
var MyForm = React.createClass({
render: function(){
return (<input type="text" defaultValue="Hello" />);
}
});
var MyForm = React.createClass({
handleChange: function(){
var value = this.refs.myinput.value;
console.log(value);
},
render: function(){
return (<input type="text" ref="myinput" onChange={this.handleChange} defaultValue="Hello" />);
}
});
<textarea>初始值</textarea>
//非約束
<textarea defaultValue="Hello" />
//約束
<textarea value={this.state.value} onChange={this.handleChange} />
//非約束
<select defaultValue="B">
<option value="A">A</option>
<option vlaue="B">B</option>
</select>
//約束
<select value={this.state.mySelect} onChange={this.handleChange}>
<option value="A">A</option>
<option vlaue="B">B</option>
</select>
//非約束
<select multiple="true" defaultValue={["A","B"]}>
<option value="A">A</option>
<option vlaue="B">B</option>
</select>
//約束
<select multiple="true" value={this.state.mySelect} onChange={this.handleChange}>
<option value="A">A</option>
<option vlaue="B">B</option>
</select>
//非約束
<input type="radio" defaultChecked="true" />
//約束
<input type="radio" checked={this.state.checked} onChange={this.handleChange} />
3.4 Focus
在React中，我們使用 autoFocus 屬性來聚焦：
<input type="text" autoFocus="ture" />
當(dāng)然，你也可以調(diào)用DOMNode的focus()方法來手動設(shè)置表單域聚焦。
總結(jié)
- 表單組件有兩種類型：約束組件（有value值）和非約束組件（無value值或value為null）。
- 所有的 HTML 原生組件都支持 onChange 屬性，而且可以用來監(jiān)聽冒泡的 change 事件，同時(shí)也提供了 event.target 來訪問觸發(fā)事件的DOM節(jié)點(diǎn)。
- 在React中，對于<textarea/>和<select/>組件，使用value和defaultValue來設(shè)置。
更多建議：