defaultChecked 和 checked 的区别

defaultChecked

只在初次渲染时生效，更新时不受控制

// 统计已完成的个数
const doneCount = todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)// 总数
const total = todos.length
<input type="checkbox" defaultchecked={ doneCount===total&&total!==0?true:false }/>}

效果：
如果刚开始没有全选，自己手动全选则不会再被勾选

checked

始终受到控制，必须通过绑定 onChange 事件来控制选中情况

// 统计已完成的个数
const doneCount = todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)
// 总数
const total = todos.length
<input type="checkbox" checked={ doneCount===total&&total!==0?true:false }/>

会有一条错误，因为他希望我们是在 checkbox上绑定 onChange 事件来控制状态（想要功能已经实现）

所以我们添加一个onChange事件

<input type="checkbox" onChange={this.handleCheckAll} checked={ doneCount===total&&total!==0?true:false }/>

平常应该如下使用：

export default class App extends Component {state = {checked: true}// 通过 onChange 事件来设置状态handleChange = (e) => {this.setState({checked: e.target.checked})}render() {return (<div><input type="checkbox" checked={this.state.checked} onChange={this.handleChange}/></div>)}
}

总结
defaultChecked、defaultValue 只在初始渲染时由状态控制，之后更新不再跟状态有关系，而checked、value在全过程中都受状态控制

defaultChecked 和 checked 的区别相关推荐

React 全家桶（react脚手架 redux react-redux react-router-dom ui库 reactHook）含自定义hook的方法及使用
文章目录 React 入门 React 简介 React 为何物为何学习 React React 初体验来一发 Hello React 创建虚拟 DOM 的两种方式:JS 和 JSX 虚拟 DOM ...
React 学习笔记
导 1. react- 用于构建用户界面的javaScript 库发送请求获取数据处理数据(过滤.整理) 操作dom 呈现页面 react 是一个将数据渲染微HTML视图的开源 JavaScrip ...
React学习笔记(上)
一.React文件的创建(不使用脚手架进行文件的创建过程) 1.1.这里的React文件是一个html文件,或者是一个js文件,需要安转相关依赖 React:是React的核心包 React-dom: ...
react16.8-17 全家桶学习 QA
适用人群:刚开始学习 react 框架的同学,当作参考查阅. 说明:多以自己分析整理为主,如有错误理解请指正,谢谢! 笔记来源开始 – React (Q1-2,有点傻的问题已经删掉了) 尚硅谷Rea ...
【尚硅谷React】——React全家桶笔记
文章目录第1章 React简介 1.1 React的特点 1.2 引入文件 1.3 JSX 1.3.1 为什么要用JSX 1.3.2 JSX语法规则 1.4 虚拟DOM 1.5 模块与组件 1.5. ...
react脚手架日常学习记录
文章目录一. 初始化React脚手架 1.基础相关 2.创建项目 3.脚手架项目结构 4.流程相关二. 规范相关三. input相关四. react父子组件传值五. TodoList案例小总 ...
React系统学习笔记
***当前阶段的笔记 *** 「面向实习生阶段」https://www.aliyundrive.com/s/VTME123M4T9 提取码: 8s6v 点击链接保存,或者复制本段内容,打开「阿里云盘」 ...
React学习笔记---React脚手架
React脚手架一.使用create-react-app创建react应用 1.react脚手架 2.创建项目并启动 3.react脚手架项目结构 4.功能界面的组件化编码流程(通用) 5.用脚手架 ...
react-TodoList案例
TodoList案例一 TodoList案例_静态组件需要理解的概念有: 根据目标页面进行组件拆分规划样式内容的变化className与style的变化样式文件的拆分App.css以及各个模块 ...

defaultChecked 和 checked 的区别

defaultChecked

checked

defaultChecked 和 checked 的区别相关推荐

最新文章

热门文章