隱藏表單中的反應組件？

Question

在下面的表單組件中，我們如何隱藏某些輸入組件？

#1 我們如何將 display: none 傳遞給某個組件？ #2 嘗試設置狀態並掛載，但在渲染時拋出錯誤。

const inputStyle = { display:none } 並通過 style = {inputStyle} 來影響某些組件

有沒有任何有效的方法可以有條件地呈現下面的表單並隱藏不同域的不同組件？

import React from 'react'



class ClassComponentForm extends React.Component {

    state = {}

    componentDidMount(){
        this.setState(emptyForm)
    }

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

    render(){

        return(
            <div id='classComponentForm'>
                <h2>
                    Please Enter Your Information - Class
                </h2>
                <form id='form'>
                    <label htmlFor='nameInput'>
                        Name:
                    </label>
                    <input
                        id='nameInput'
                        name='name'
                        type='text'
                        placeholder='Please type your name'
                        value={this.state.name}
                        onChange={(e) => this.handleChange(e)}
                    />
                    <label htmlFor='emailInput'>
                        Email:
                    </label>
                    <input
                        id='emailInput'
                        name='email'
                        type='text'
                        placeholder='Please type your email'
                        value={this.state.email}
                        onChange={(e) => this.handleChange(e)}
                    />
                    <label htmlFor='zipcodeInput'>
                        Zipcode:
                    </label>
                    <input
                        id='zipcodeInput'
                        name='zipcode'
                        type='text'
                        placeholder='Please type your zipcode'
                        value={this.state.zipcode}
                        onChange={(e) => this.handleChange(e)}
                    />
                    <label htmlFor='dateInput'>
                        Date:
                    </label>
                    <input
                        id='dateInput'
                        name='date'
                        type='date'
                        value={this.state.date}
                        onChange={(e) => this.handleChange(e)}
                    />
                </form>
            </div>
        )
    }
}

export default ClassComponentForm

Answer 1

根據您在輸入元素中定義的輸入名稱（因為e.target.name ），狀態對象內的handleChange設置鍵。 您已經在 value prop value={this.state.email}中訪問了這個值

同樣的東西可以用來有條件地隱藏每個輸入。 這是一個如何隱藏電子郵件輸入的示例。

    {this.state.email && <input
                            id='emailInput'
                            name='email'
                            type='text'
                            placeholder='Please type your email'
                            value={this.state.email}
                            onChange={(e) => this.handleChange(e)}
                        />}