// 受控组件:其值受到React控制的表单元素
// 操作文本框的值
class App extends React.Component {
state = {
txt: '',
content: '',
city: 'bj',
isChecked: false,
}

// 处理多表单元素的变化
handleForm = e => {
// 获取当前DOM对象
const target = e.target
// 根据类型获取值
const value = target.type === 'checked'
? target.checked
: target.value
// 获取name
const name = target.name
this.setState({
[name]: value
})
}
render() {
return(
<div>
{/* 文本框 */}
<input type="text" name="txt" value={this.state.txt} onChange={this.handleForm}/>
<br/>
{/* 富文本框 */}
<textarea name="content" value={this.state.content} onChange={this.handleForm}>textarea>
<br/>
{/* 下拉框 */}
<select name="city" value={this.state.city} onChange={this.handleForm}>
<option value="sh">上海option>
<option value="bj">北京option>
<option value="gz">广州option>
select>
<br/>
{/* 复选框 */}
<input type="checkbox" name="isChecked" checked={this.state.isChecked} onChange={this.handleForm} />
div>
)
}
}
// 渲染组件
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)
基本上新的特性比较少,主要还是考虑和之前的一个兼容。
改写hook吧 大兄嘚