目录
一 关于受控组件
html的表单元素是可以输入的,也就是有自己的可变状态
而react中的可变状态通常保存在state中,并且只能通过setState()方法来修改
于是就发生冲突了
那么解决办法是什么呢?
react将state与表单元素的value值绑定在一起
由state的值来控制表单元素的值
受到react控制的表单元素 就叫 受控组件
二 使用受控组件
使用步骤
1 在state中添加一个状态,作为表单元素的value值(控制表单元素值的来源)
state = {
txt: 123
}
<input value={this.state.txt} />
2 给表单元素绑定一个change事件,将表单元素的值设置为 state 的值(控制表单元素值的变化)
fn = e => {
this.setState({
//e.target.value 就表示当前文本框的最新值
txt: e.target.value
}
)
}
<input onChange={this.fn}/>
备注: 复选框是通过checked属性来控制的,而不是value
代码
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
//初始化state
state = {
txt: 123,
select: 'yellow',
flag: true
}
//处理文本框的变化
fn = e => {
this.setState({
//e.target.value 就表示当前文本框的最新值
txt: e.target.value,
}
)
}
//处理下拉框的变化
fnColor = e => {
this.setState({
select: e.target.value
}
)
}
// 处理复选框的变化
fnBox = e => {
this.setState({
flag: e.target.checked
}
)
}
render() {
return (
<div>
{/*文本框*/}
<input type='text' value={this.state.txt} onChange={this.fn}/>
{/*下拉框*/}
<select value={this.state.select} onChange={this.fnColor}>
<option value='blue'>蓝色</option>
<option value='yellow'>黄色</option>
<option value='white'>白色</option>
</select>
{/*复选框*/}
<input type='checkbox' checked={this.state.flag} onChange={this.fnBox}/>饭否
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
初始页面预览
修改内容之后
修改内容之后state的值也跟着变化