anu/index9.html at master · YMFE/anu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
   <script type='text/javascript' src="./dist/React.js"></script>
   <!-- <script src="./dist/react.development.js"></script>
    <script src="./dist/react-dom.development.js"></script>-->
   <!--<script src="./test/react.js"></script>
  <script src="./test/react-dom.js"></script>-->
    <script src="https://cdn.bootcss.com/redux/3.7.2/redux.js"></script>
    <script src="https://cdn.bootcss.com/redux-thunk/2.2.0/redux-thunk.js"></script>
    <script src="./lib/babel.js"></script>
    <script type='text/babel'>

window.onload = function(){
    class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.incrementAsync = this.incrementAsync.bind(this);
        this.incrementIfOdd = this.incrementIfOdd.bind(this);
    }

    incrementIfOdd() {
        if (this.props.value % 2 !== 0) {
            this.props.onIncrement()
        }
    }

    incrementAsync() {
        setTimeout(this.props.onIncrement, 1000)
    }

    render() {
        const { value, onIncrement, onDecrement } = this.props
        return (
            <div>
                <p>当前点击次数: {value} </p>
                <input value="增加" type="button" onClick={onIncrement} />

                <input value="减少" type="button" onClick={onDecrement} />
                <input value="只有奇数才能加" type="button" onClick={this.incrementIfOdd} />

                <input value="异步增加" type="button" onClick={this.incrementAsync} />

            </div>
        )
    }
}

function counter(state = 0, type) {
    switch (type) {
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state - 1
        default:
            return state
    }
}
function connect(instance, value, store, type){
    var a = store.getState()
    var b = counter( a, type)
    console.log(a, b)
    if(a !== b){
        instance.setState({
            [value]: b
        })
    }
}
const store = Redux.createStore(counter)
const div = document.getElementById('example')
const render = () => ReactDOM.render(
    <Counter
        value={store.getState()}
        onIncrement={() => connect(this, 'value', store, 'INCREMENT') }
        onDecrement={() => connect(this, 'value', store, 'DECREMENT') }
    />,
    div
)

render()
//store.subscribe(render)
}
    </script>
</head>

<body>

    <div>这个默认会被清掉</div>
    <div id='example'></div>


</body>

</html>