无法在文本框中输入-React

时间:2019-09-16 19:00:54

标签: reactjs

尝试在网络浏览器中输入文本字段框,但没有执行 什么都没有,我没有错误通知

这是我遵循的教程代码,我无法在文本框中输入任何内容

import React, {Component} from 'react'

class Form extends Component {
    constructor() {
        super() 

        this.state = {
            firstName: "", 
            lastName: ""
        }
    this.handleChange = this.handleChange.bind(this)
    }

    handleChange(event) {
        const {name, value} = event.target
        this.setState({
            [name]: value
        })
    }

    render() {

        return(
            <form>
            <input 
                type="text"
                value={this.state.firstName}
                placeholder="First Name"
                onChange={this.handleChange}
            />
            <br />
            <input
                type="text"
                value={this.state.lastName}
                placeholder="Last Name"
                onChange={this.handleChange}
            />
            </form>
        )   
    }
}

export default Form

期望能够键入但不能

1 个答案:

答案 0 :(得分:0)

您在输入中忘记了name标记:https://stackblitz.com/edit/react-hfhajx

import React, {Component} from 'react'

class Form extends Component {
    constructor() {
        super() 

        this.state = {
            firstName: "", 
            lastName: ""
        }
    this.handleChange = this.handleChange.bind(this)
    }

    handleChange(event) {
        const {name, value} = event.target
        this.setState({
            [name]: value
        })
    }

    render() {

        return(
            <form>
            <input 
                type="text"
                name="firstName"
                value={this.state.firstName}
                placeholder="First Name"
                onChange={this.handleChange}
            />
            <br />
            <input
                type="text"
                name="lastName"
                value={this.state.lastName}
                placeholder="Last Name"
                onChange={this.handleChange}
            />
            </form>
        )   
    }
}

export default Form