1.表單控制元件的操作
1.資料雙向繫結
demo1: 在輸入框中輸入或者刪除資料時，可以實時監控。
class App extends React.Component {
state = {
val : ""
}
handleChange = (e) => {
this.setState({
val : e.target.value
})
}
render(){
return (
<div>
<h1>form</h1>
<input
type="text"
value={this.state.val}
onChange={this.handleChange}
/>
<b>{this.state.val}</b>
</div>
)
}
}
ReactDOM.render(
<App></App>,
document.getElementById("app")
)
複製程式碼初始效果：
- 非受控(非約束性)表單控制元件: 使用者輸入的值獲取不到
- 受控(約束性)表單控制元件: 讓react管理表單的資料，能夠監視資料的改變
2.onSubmit事件，當表單提交時會觸發的事件
demo2:單選框，下拉選單，多選框，文字域的一些操作
class App extends React.Component {
state = {
user : "",
sex : "",
cityList : ["上海","江蘇","浙江"],
city : "" ,
like : [
{
title: "籃球",
checked: true
},
{
title: "足球",
checked: false
},
{
title: "乒乓球",
checked: false
}
],
textArea : ""
}
//提交資料
handleSubmit = (e) => {
e.preventDefault(); //阻止預設事件
console.log("使用者名稱",this.state.user);
console.log("性別",this.state.sex);
console.log("城市",this.state.city);
console.log("愛好",this.state.like);
console.log("介紹",this.state.textArea);
}
//更新使用者名稱
handleUser = (e) => {
this.setState({
user : e.target.value
})
}
//更新單選框
handleSex = (e) => {
this.setState({
sex : e.target.value
})
}
//更新下拉選單
handleSelect = (e) => {
this.setState({
city : e.target.value
})
}
//更新多選框
handleLike = (i) => {
const like = this.state.like;
like[i].checked = !like[i].checked
this.setState({
like
})
}
//處理文字域
handleText = (e) => {
this.setState({
textArea : e.target.value
})
}
render(){
return (
<div>
<h1>form</h1>
<br/>
<form onSubmit={this.handleSubmit}>
使用者名稱：<input type="text" value={this.state.user} onChange={this.handleUser}/>
<br/>
<br/>
性別:
<input type="radio" value={"0"} checked={this.state.sex === "0"} onChange={this.handleSex} /> 男
<input type="radio" value={"1"} checked={this.state.sex === "1"} onChange={this.handleSex} /> 女
<br/>
<br/>
城市：
{
this.state.cityList.length>0 && (
<select value={this.state.city} onChange={this.handleSelect}>
{
this.state.cityList.length>0 && this.state.cityList.map((item, index) => {
return(
<option key={index}>{item}</option>
)
})
}
</select>
)
}
<br/>
愛好：
{
this.state.like.length>0 && this.state.like.map((item, index) => {
return (
<div key={index}>
<input
type={"checkbox"}
checked={item.checked}
onChange={this.handleLike.bind(this, index)}
/>
{item.title}
</div>
)
})
}
<br/>
<textarea value={this.state.textArea} onChange={this.handleText} cols={"30"} ></textarea>
<br/>
<br/>
<input type="submit" value={"提交"}/>
</form>
</div>
)
}
}
ReactDOM.render(
<App></App>,
document.getElementById("app")
)
複製程式碼效果圖,將傳遞給後臺的資料列印出來：
