React的单向数据绑定

文章目录

单项数据绑定

在 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方法,实现双向数据绑定)

(1)index.html:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 容器,通过 React 渲染得到的 虚拟DOM,会呈现到这个位置 -->
  <div id="app"></div>
</body>

</html>

(2)main.js:

javascript 复制代码
// JS打包入口文件
// 1. 导入包
import React from "react";
import ReactDOM from "react-dom";

// 导入组件
import MyComponent from "./components/MyComponent.jsx";

// 使用 render 函数渲染 虚拟DOM
ReactDOM.render(
  <div>
    <MyComponent></MyComponent>
  </div>,
  document.getElementById("app")
);

(3)components/MyComponent.jsx

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
    });
  };
}

工程文件:ReactDemo.zip

相关推荐
markyankee1017 分钟前
JavaScript 作用域与闭包详解
前端·javascript
gufs镜像7 分钟前
Swift学习总结——使用Playground
前端·ios·面试
高冷的小明7 分钟前
React-Find 一款能快速在网页定位到源码的工具,支持React19.x/next 15
前端·javascript·react.js
parade岁月8 分钟前
从浏览器存储到web项目中鉴权的简单分析
前端·后端
默默地写代码19 分钟前
微信小程序 新版canvas绘制名片
前端·javascript·微信小程序
weixin_4565881519 分钟前
【web 安全】从 HTTP 无状态到现代身份验证机制
前端·web安全·http
BillKu24 分钟前
Element Plus 对话框 el-dialog 和 抽屉 el-drawer 的使用注意项(使用 div 包裹)
javascript·vue.js·elementui
luckymiaow24 分钟前
「从零到一打造现代桌面应用:基于 Electron + Vite + Vue3 + TypeScript 的高效开发模板」
前端·vue.js
layman052825 分钟前
Vue 中的配置代理
前端·javascript·vue.js
BillKu31 分钟前
Vue3 + TypeScript 中 hook 优化记录
开发语言·javascript·typescript