好客租房37-多表單元素優化
使用一個事件處理多個元素
1給表單元素新增name屬性 名稱域state相同
2根據表單元素獲取對應值
3在唱歌事件處理程式中通過[name]修改對應的state
//匯入react
import React from 'react'
import ReactDOM from 'react-dom'
//匯入元件
// 約定1:類元件必須以大寫字母開頭
// 約定2:類元件應該繼承react.component父類 從中可以使用父類的方法和屬性
// 約定3:元件必須提供render方法
// 約定4:render方法必須有返回值
class HelloWorld extends React.Component {
//初始化state
state = {
txt: '1',
content:"2",
sex:"nan",
isChecked:true
}
handleChange = (e) => {
//獲取當前的dom物件
const target=e.target
//根據型別獲取值
const value =target.type==="checkbox"?target.checked:target.value
//獲取name
const name=target.name
this.setState({
[name]: value,
})
}
// handleChangeValue = (e) => {
// this.setState({
// value: e.target.value,
// })
// }
// handleChangeSelect = (e) => {
// this.setState({
// value: e.target.select,
// })
// }
// handleChangeCheck = (e) => {
// this.setState({
// checked: e.target.checked,
// })
// }
//抽離出來 this報錯 事件處理中的this為underfine
render() {
return (
<div>
<input
type="text"
name="txt"
value={this.state.txt}
onChange={this.handleChange}
/>
<textarea name="content" onChange={this.handleChange} value={this.state.content}></textarea>
<select name="sex" onChange={this.handleChange} value={this.state.sex}>
<option value="nan">男</option>
<option value="nv">女</option>
</select>
<input
type="checkbox"
name="isChecked"
checked={this.state.isChecked}
onChange={this.handleChange}
/>
</div>
)
}
}
ReactDOM.render(<HelloWorld />, document.getElementById('root'))
執行結果