时间戳

首页 > 解决方案 > React Datepicker - 内联样式不起作用

css - React Datepicker - 内联样式不起作用

问题描述

如果条目无效，我将触发 onBlur javascript 函数将输入的边框变为红色。

除了 Datepicker 之外，这一切正常。

我可以使用类名设置其边框的样式，但我需要使用内联样式来使其根据输入的内容进行更改。我怎样才能做到这一点？

我的代码：

state= {
    borderColors:{
        startDetails: 'none',
    }
}

borderColor = (e, field) => {
    e.preventDefault()
    let borderColors = this.state.borderColors
    e.target.value === '' ? borderColors[field] = 'tomato' : borderColors[field] = '#00988f'
    this.setState({borderColors})
}



  <DatePicker
     className="datePicker"
     timeIntervals={15}
     selected={values.startDetails}
     onBlur = {event => this.borderColor(event, 'startDetails')}
     onChange={(event) => this.props.changeField(event, "startDetails")}
     showTimeSelect
     dateFormat="d MMM yyyy HH:mm"
     required
     placeholderText={'Date & Time Event Starts'}
     style={{borderColor: this.state.borderColors.startDetails}}
     />

标签： cssreactjsdatepickeronblurinline-styles

解决方案

我通过在 css 文件中将其宽度设置为零来删除 datePicker 周围的边框来解决此问题。

然后我将 datePicker 包装在一个 div 中，给它一个边框并在 div 中设置一个内联样式，以根据函数设置的状态值设置边框颜色

推荐阅读