レンダリング
コード セグメント
import React, {
Component } from 'react';
class App extends Component {
state = {
/* 点击按钮+1 input默认数*/
num: 1,
// 简易计算机 默认参数
c1: 1,
c2: 1,
res: 2,
current: '+',
// to-do-list状态数据
list: [{
text: '学习jquery', done: true }, {
text: '学习vue2', done: true }, {
text: '学习react', done: false }],
text: '',
}
// to-do-list添加数据----------------------------------------------
addList() {
// 获取list
var list = this.state.list
// 将输入框的值 添加到list数组里 默认done为false
list.push({
text: this.state.text, done: false })
// 清空输入框
this.state.text = ''
// setState状态 从而更新视图
this.setState({
list })
}
delList(item) {
// 获取list
var list = this.state.list
// 获取当前选中删除的下标 item形参确定哪项
var index = list.findIndex(i => i.text == item.text)
// 将选中的下标在list数据里删除 splice数组删除法
list.splice(index, 1)
// 更新state 更新视图
this.setState({
list })
}
updateList(item, val) {
//形参item需要传item 和val input的状态也就是done：false/true
// 获取list
var list = this.state.list
// 获取当前选中的下标
var index = list.findIndex(i => i.text == item.text)
// list选中的下标更改done值也就是input的checked状态
list[index].done = val
// 更新视图
this.setState({
list })
console.log();
}
// 点击加加
add = (val) => {
//val形参 加val
this.setState({
num: this.state.num + val })
}
// 点击减减
reduce = (val) => {
if (this.state.num > 0) {
this.setState({
num: this.state.num - val })
}
}
// 简易计算机 计算结果 --------------------------------------------------------------
total() {
// 获取减数、被减数、差 便于下边计算简易代码
var res = this.state.res
var c1 = this.state.c1
var c2 = this.state.c2
// 这里也可以用eval 只不过消耗性能 不建议使用
if (this.state.current == '+') {
res = Number(c1 + c2)
} else if (this.state.current == '-') {
res = Number(c1 - c2)
} else if (this.state.current == '*') {
res = Number(c1 * c2)
} else if (this.state.current == '/') {
res = Number(c1 / c2)
}
// 更新视图
this.setState({
res })
}
render() {
// 已完成清单
var doneList = this.state.list.filter(item => item.done)
// 未完成清单
var undoneList = this.state.list.filter(item => !item.done)
console.log(undoneList);
return (<>
{
/* 点击按钮+1 */}
<h1>点击按钮+1</h1>
<input type="text" value={
this.state.num} onChange={
e => this.setState({
num: e.target.value * 1 })} />
<button onClick={
this.add.bind(this, 1)}>点击+1</button>
{
/* 简易计算机 */}
<h1>简易计算机</h1>
<div className="count">
<input type='number' value={
this.state.c1} onChange={
e => this.setState({
c1: e.target.value })} />
<select className='sel' value={
this.state.current} onChange={
e => this.setState({
current: e.target.value })}>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">÷</option>
</select>
<input type='number' value={
this.state.c2} onChange={
e => this.setState({
c2: e.target.value })} />
<button onClick={
this.total.bind(this)}>=</button>
{
this.state.res}
</div>
{
/* 步进器 */}
<h1>步进器</h1>
<button onClick={
this.reduce.bind(this, 1)}>-</button>
<input style={
{
width: '20px', textAlign: 'center' }} value={
this.state.num} onChange={
e => this.setState({
num: e.target.value })} />
<button onClick={
() => this.add(1)}>+</button>
{
/* to-do-list */}
<h1>美妙清单</h1>
<input type="text" value={
this.state.text} onChange={
e => this.setState({
text: e.target.value })} />
<button onClick={
this.addList.bind(this)}>添加</button>
<h3>已完成（{
doneList.length}）</h3>
{
doneList.map((item, index) => <div key={
index}>
<input type='checkbox' checked={
item.done} onChange={
(e) => this.updateList(item, e.target.checked)} />
<span>{
item.text}</span>
<button onClick={
this.delList.bind(this, item)}>X</button>
</div>)}
<h3>未完成（{
undoneList.length}）</h3>
{
undoneList.map((item, index) => <div key={
index}>
<input type="checkbox" value={
item.done} onChange={
(e) => this.updateList(item, e.target.checked)} />
<span>{
item.text}</span>
<button onClick={
this.delList.bind(this, item)}>X</button>
</div>)}
</>);
}
}
export default App;