如果条件为真，则添加 className答案

【问题标题】：Adding a className if a condition is true如果条件为真，则添加 className
【发布时间】：2020-06-25 03:36:13
【问题描述】：

我有一个包含多个字段和一个提交按钮的表单。一旦我点击提交按钮，它将来到这个filterProperties 函数。我在 filterProperties 函数中有一个 if 条件。所以在这种情况下，我正在检查退房日期是否为空。如果 if 条件为真，我想将 has-error 类添加到 datepicker。如果有人知道如何做到这一点，请帮忙。

      filterProperties = () => {
        let checkin = this.state.checkin;
        let checkout = this.state.checkout;
        let guestCount = this.state.guest_count;
        let cityID = this.state.selectedcityID;
        let budget = parseFloat(this.state.textthree).toFixed(2);
        if (checkin !== "" && checkout === '') {
            alert('plz enter the check out date');
        }

        const cityProperties = {
            checkin: checkin,
            checkout: checkout,
            guestCount: guestCount,
            cityID: cityID,
            budget: budget
        }
        console.log(cityProperties);
        this.props.getCityProperties(cityProperties);
    }

                  <FormItem style={{ marginBottom: '0' }} label="Check Out">
                        <span>
                            {getFieldDecorator('check_out', {
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please select a Check Out Date',
                                    }, {
                                        validator: this.checkCheckoutDates,
                                    }
                                ],
                            })(<DatePicker
                                className={className}
                                disabled={(this.state.checkin === '')}
                                disabledDate={this.disabledDateCheckout}
                                onChange={(e) => this.dateSelected(e, 'checkout')}
                                defaultValue={moment(new Date((new Date()).valueOf() + 1000 * 60 * 60 * 24))}
                                format={dateFormat}
                            />)}
                        </span>
                    </FormItem>

【问题讨论】：

标签： css reactjs classname

【解决方案1】：

你可以使用这样的东西

<Element className={`${this.state.flag ? className : ''}`} />

【讨论】：

它不工作！我收到一个错误，提示未定义类名。

【解决方案2】：

试试这个-

<DatePicker
                                className={(this.state.checkin !== "" && this.state.checkout === "")? "class-name": ""}
                                disabled={(this.state.checkin === '')}
                                disabledDate={this.disabledDateCheckout}
                                onChange={(e) => this.dateSelected(e, 'checkout')}
                                defaultValue={moment(new Date((new Date()).valueOf() + 1000 * 60 * 60 * 24))}
                                format={dateFormat}
                            />

【讨论】：