React Datepicker - 内联样式不起作用

Question

如果输入无效，我正在触发 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}}
     />

Answer 1

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

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