Отображать информацию, когда нет входных данных в реактивном входе - PullRequest
Новая
       52

Отображать информацию, когда нет входных данных в реактивном входе

0 голосов
/ 22 сентября 2019

Я хочу создать поле ввода в React.

В основном оно должно отображать введенный ввод в режиме реального времени (управлял этой частью).Тем не менее, он также должен отображать сообщение "данные не предоставлены!"когда ничего не было введено.

Мое утверждение if не работает?Почему? 

import React from "react"
import ReactDOM from "react-dom"

class Exercise1 extends React.Component {

    constructor() {
        super()
        this.state = {
            firstName:""
        }
        this.handleChange = this.handleChange.bind(this)
    }

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

    render() {
        let display
        if(this.state.firstname != "") {
            display=this.state.firstName
        } else {
            display="no data provided!"
        }
        return (
            <div>
                <form>Input: 
                    <input 
                        type="text" 
                        name="firstName" 
                        placeholder = "no data provided!"
                        value={this.state.firstName}
                        onChange={this.handleChange}
                    />
                </form>

                <h1>{display}</h1>              
            </div>
        )
    }
}


export default Exercise1

PS: пожалуйста, придерживайтесь максимально возможного ответа на приведенный выше код, поскольку я новичок и не могу придерживаться слишком разных подходов.

Ответы [ 2 ]

1 голос
/ 22 сентября 2019

У вас есть опечатка здесь.Ваша переменная состояния firstName (с заглавной буквы N), но вы пытаетесь проверить условие с помощью firstname (с небольшим n).Вы должны сделать это, 

if(this.state.firstName != "") {
    display = this.state.firstName
} else {
    display = "no data provided!"
}

Демо

0 голосов
/ 22 сентября 2019

Привет, ты можешь использовать свой, если это нравится 

import React from "react"
import ReactDOM from "react-dom"

class Exercise1 extends React.Component {

    constructor() {
        super()
        this.state = {
            firstName:""
        }
    }

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

    render() {
        const { firstName } = this.state
        return (
            <div>
                <form>Input: 
                    <input 
                        type="text" 
                        name="firstName" 
                        placeholder = "no data provided!"
                        value={this.state.firstName}
                        onChange={this.handleChange}
                    />
                </form>

                <h1>{firstName ? firstName : "no data provided!"}</h1>              
            </div>
        )
    }
}


export default Exercise1
...