关于React中的数据源绑定

React中的数据源绑定

React认为:一个输入框的数据源只有一个,要么是用户输入,要么是模型绑定,但是同时受数据源的影响

<input value={绑定值}>xxx</input> 

换句话说叫做受控组件

如果直接这样处理的话会造成输入框只读(换句话说叫做受控组件)

所以解决方案就是通过一个事件去读取(与Vue不同)

let [Username, SetUsername] = useState("yeye");
// 双向数据绑定来获取用户输入的内容
let [kw, setkw] = useState("abc");
// 处理用户输入的改变事件
let doKwChange = e => {
    
    
	let val = e.target.value;
	// 把用户最新的输入内容赋值给数据源
	setkw(val);
};

JSX:

<input
	type='text'
	onChange={ 
        doKwChange}
	value={kw}
	placeholder='资讯/搜索商品'
/>

猜你喜欢

转载自blog.csdn.net/weixin_50112395/article/details/127404771