React user input case

User input case

import React, { Component } from 'react'
export default class name extends Component {
    constructor(props) {
        super(props)
        this.state = {
            surName: '',
            laseName: ''
        }
    }
    getVal = (e) => {
        // console.log(e.target.name)
        this.setState({
            // 只有加了中括号target才是一个可以解析的变量
            [e.target.name]:e.target.value
        })
    }
    render() {
        // 解构赋值
        const { surName, laseName } = this.state
        return (
            <div>
                姓: <input type="text" name="surName" onChange={this.getVal} />
                <hr />
                名:<input type="text" name="laseName" onChange={this.getVal} />
                <p> 欢迎：{surName} {laseName}</p>
            </div>

        )
    }
}
// 出问题的原因是单词name写错了