React Form
基本的 Form 操作
1 getInitialState 設置 state (input 的 defaultValue) 2 input 的值在渲染時設置 (state) 3 input 的值在 onChange 時,handleChange 被調用 4 handleChange 更新 state 的值 5 重新渲染時,更新 input
var MyForm = React.createClass({
getInitialState : function(){
return {
hellotTo: "Hello World!"
};
},
handleChange: function(event){
this.setState({
hellotTo: event.target.value
});
},
submitHandler: function(event){
event.preventDefault();
alert(this.state.hellotTo);
},
render: function(){
return(
<form onSubmit={this.submitHandler}>
<input ref="hellotTo" type="text" value={this.state.hellotTo} onChange={this.handleChange} />
<br/ >
<button type="submit">Speak</button>
</form>
);
}
});
Lable
如果要使用 Lable 的話,因為 for
是 JS 裡面的保留字,所以要使用 htmlFor
<lable htmlFor="name">Name:</lable>
Select Multiple
select 為 multiple 時,select 的值在選項被選擇時不會更新,只有選項的 selected
屬性會發化,下面的作法是在 onChange
時檢查是否被選中
var MyForm = React.createClass({
getInitialState : function(){
return {
options: ["A"]
};
},
handleChange: function(event){
var checked = [];
var sel = event.target;
console.log(sel);
for(var i = 0; i < sel.length; i++){
var option = sel.options[i];
console.log(option);
if(option.selected){
checked.push(option.value);
}
}
console.log(checked);
this.setState({
options : checked
});
},
submitHandler: function(event){
event.preventDefault();
alert(this.state.options);
},
render: function(){
return(
<form onSubmit={this.submitHandler}>
<select multiple="true" value={this.state.options} onChange={this.handleChange}>
<option value="A">First Option</option>
<option value="B">Second Option</option>
<option value="C">First Option</option>
</select>
<br/ >
<button type="submit">Speak</button>
</form>
);
}
});
Radio
radio 相對來說比較簡單一點,因為一次只會有一個選中,直接下判斷就可以
var MyForm = React.createClass({
getInitialState : function(){
return {
radio: "B"
};
},
handleChange: function(event){
this.setState({
radio : event.target.value
});
},
submitHandler: function(event){
event.preventDefault();
alert(this.state.radio);
},
render: function(){
return(
<form onSubmit={this.submitHandler}>
<label htmlFor="A" >A</label>
<input id="A" type="radio" value="A" checked={this.state.radio === "A"} onChange={this.handleChange} />
<br/ >
<label htmlFor="B" >B</label>
<input id="B" type="radio" value="B" checked={this.state.radio === "B"} onChange={this.handleChange} />
<br/ >
<label htmlFor="C" >C</label>
<input id="C" type="radio" value="C" checked={this.state.radio === "C"} onChange={this.handleChange} />
<br/ >
<button type="submit">Speak</button>
</form>
);
}
});