react-简单输入框的处理

import React, { Component } from 'react'


// 类的组件写法，都是jsx
export default class hello extends Component {
    constructor(props) {
        super(props);
        this.state = {
            val: "",
            goods: [
                {
                    title: "java",
                    price: 1000
                },
                {
                    title: "php",
                    price: 500
                }, {
                    title: "python",
                    price: 800
                }
            ]

        }
    }

    changeVal(ev) {
        this.setState({
            ...this.state,
            val: ev.target.value
        });
    }

    addGood(name) {
        var good = {
            title: name,
            price: 666
        }
        this.setState({
            goods: [
                ...this.state.goods,
                good
            ]
        });
    }
    render() {
        return (
            <div>
                <input type='text' value={this.state.val} onChange={(event) => this.changeVal(event)}></input>
                <button onClick={(ev) => this.addGood(this.state.val)}>submit</button>
                <ul>
                    {/* jsx 可以嵌套jsx  */
                        this.state.goods.map(item => {
                            return (<li>{item.title}</li>)
                        })
                    }
                </ul>
            </div>
        )
    }
}

我是最笨的，我学计算机，6年都没学出来，关键就是没有坚持敲和做笔记，希望大家以我为戒

在react 中， 数组会自动的展开

对于表单项的处理，需要我们手动的处理，没有双向绑定‘

 

数据绑定到视图，直接通过jsx 语法，放进去就行了

视图数据的搜集我们就需要自己加事件搜集就行了，至于上面表单，我们把数据放state 中，同步就行了

至于es6的函数语法，这个无非就是改变this 的指向，这个不会，你会觉得很乱，看懂也就那么回事

还是习惯的问题！

我们看下 示意图：

每次添加没有清空输入框，这个我们改下代码就行了

行，这篇就写到这，

一，简单输入框的处理

二，给我们的商品列表，添加了到商品列表项的方法