关于React中的数据源绑定

React中的数据源绑定

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

<input value={绑定值}>xxxinput> 
1

换句话说叫做受控组件

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

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

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

JSX:

<input
	type='text'
	onChange={doKwChange}
	value={kw}
	placeholder='资讯/搜索商品'
/>
1
2
3
4
5
6