Web/13-React基础/06-React中与on相关的属性.md

106 lines
2.9 KiB
Markdown
Raw Normal View History

2019-02-13 20:20:28 +08:00
## 单项数据绑定
在 Vue 中,可以通过 v-model 指令来实现双向数据绑定。但是,在 React 中并没有指令的概念,而且 **React 默认不支持 双向数据绑定**
React 只支持,把数据从 state 上传输到 页面,但是,无法自动实现数据从 页面 传输到 state 中 进行保存。
React中只支持单项数据绑定不支持双向数据绑定。不信的话我们来看下面这个例子
```java
import React from "react";
export default class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "这是 MyComponent 组件 默认的msg"
};
}
render() {
return (
<div>
<h3>呵呵哒</h3>
<input type="text" value={this.state.msg} />
</div>
);
}
}
```
上方代码中,我们尝试在 input文本框中读取 state.msg 的值,运行结果中,却弹出了警告:
20190213_2000.png
```
Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
```
## 通过onChange方法实现双向数据绑定
如果针对 表单元素做 value 属性绑定,那么,必须同时为 表单元素 绑定 readOnly, 或者提供 onChange 事件:
- 如果是绑定readOnly表示这个元素只读不能被修改。此时控制台就不会弹出警告了。
- 如果是绑定onChange表示这个元素的值可以被修改但是要自己定义修改的逻辑。
绑定readOnly的举例如下表示value中的数据是只读的
```javascript
<input type="text" value={this.state.msg} readOnly />
```
绑定 onChange 的举例如下通过onChange方法实现双向数据绑定
```javascript
import React from "react";
export default class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "这是组件 默认的msg"
};
}
render() {
return (
<div>
<h1>呵呵哒</h1>
<input
type="text" value={this.state.msg} onChange={this.txtChanged} ref="txt" />
<h3>{"实时显示msg中的内容" + this.state.msg}</h3>
</div>
);
}
// 为 文本框 绑定 txtChanged 事件
txtChanged = (e) => {
// 获取 <input> 文本框中 文本的3种方式
// 方式一:使用 document.getElementById
// 方式二:使用 ref
// console.log(this.refs.txt.value);
// 方式三:使用 事件对象的 参数 e 来拿
// 此时e.target 就表示触发 这个事件的 事件源对象得到的是一个原生的JS DOM 对象。在这个案例里e.target就是指文本框
// console.log(e.target.value);
this.setState({
msg: e.target.value
});
};
}
```