React
web_zsh
时机未到,资格未够,请继续努力
展开
-
React 非受控表单组件
表单元素不采用value-onChange/checked-onChange方式来对state区中的数据进行双向绑定,我们就说表单元素是非受控表单元素。非受控表单元素需要使用<form></form>标记对。一、非受控文本框非受控文本框采用defaultValue来设置初始数据,defaultValue只能设置一次。<form>带有一个onSubmit事件,当表单中具有数据提交功能的按钮单击时,会自动执行这个事件。非受控文本框中设置一个ref属性,在onSub原创 2021-01-04 17:07:43 · 240 阅读 · 0 评论 -
React 受控表单组件
React 受控表单组件受控组件(Controlled Component):组件的数据受到state组件状态的控制(组件的数据和state组件状态双向绑定)const {Component,Fragment} = React;//受控表单组件class FormItem extends Component{ constructor(props){ super(props); this.state = { nick:'', /原创 2020-12-31 16:38:30 · 273 阅读 · 0 评论 -
Color调色板 (React版)
案例:Color调色板兄弟组件之间的数据传递方式:现将数据传递给父组件,父组件再将数据传递给另一个子组件。const {Component,Fragment} = React;//子组件 ColorBoardclass ColorBoard extends Component{ render(){ const {color} = this.props; return( <Fragment>原创 2020-12-29 18:45:29 · 1043 阅读 · 0 评论 -
todoList (React版)
效果图:该案例引入了:<link rel="stylesheet" href="style/bootstrap.css"><div id="app"></div>//组件TodoItem(子组件)class TodoItem extends React.Component{ //删除待办事宜 deleteItem(index){ this.props.onCustom(index); } render(){原创 2020-12-28 19:45:14 · 238 阅读 · 0 评论 -
React基础知识(一)
一、搭建React工作环境React的核心库:react.development.js。React进行Dom操作的库:react-dom.development.js。将JSX语言转换为JavaScript语言:babel.min.js。如果我们将所有的React代码都书写在HTML文档中,则页面的启动不需要服务器。如果我们将所有的React代码都书写在独立的js文件中,则页面的启动需要服务器。<!-- 注:引入顺序不可改变 --><script type="text/j原创 2020-12-28 19:38:05 · 147 阅读 · 0 评论