如何在切换时显示输入字段？

debugcn 发表于 Dev

Shravani Shinde

我想在切换时显示输入字段。切换有效，但未显示输入字段。我该如何实现？我试过了，但是没有显示输入字段。

这是代码：

 handleToggle=()=>{
        console.log('In handletoggle')
        this.setState({
            milestone_based_payment:!this.state.milestone_based_payment
        })
    }

    percentRate=()=>{
        <>
        <div className="percent-rate-container">
            <Grid container>
                <Grid item md={12} lg={12} xs={12}>
                        <div className="percent-rate">PERCENT RATE</div>
                            <div>
                                <InputBase
                                className={`milestone-percent-rate`}
                                autoComplete={"off"}
                                placeholder={"PERCENT RATE"}
                                maxLength="100"
                                value={this.state.percent_rate}
                                onChange={(e)=>{this.handleChange(e, "percent_rate")}}
                            />
                            {
                                this.state.percent_rate_error && (
                                    <div className="input-error-style">{this.state.percent_rate_error}</div>
                                )
                            }
                            </div>
                </Grid>
            </Grid>
        </div>
        </>
    }

    togglePayment=()=>{
        const {milestone_based_payment} = this.state;
        console.log('togglepayment')
        return(
            <div>
                <img src={milestone_based_payment ? PRIVATE_SwITCH : PUBLIC_SwITCH} alt="private-public" 
                    onClick={()=>this.handleToggle()}
                    style={{cursor: "pointer"}}/> 
            </div>
        );
    }

Muneeb A.

您可以在真/假条件下显示/隐藏输入字段，如下所示：

showHideInput() {
    if(this.state.milestone_based_payment === true) {
        return <input />
     }
}
// and call the method in other method 
// or inline condition
(this.state.milestone_based_payment === true) ? <input /> : <React.Fragment />

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。