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='资讯/搜索商品'
/>