如何为“反应选择”实施字段验证

Question

我需要对“ react-select”（github repo）进行简单的“必需”验证。在最新版本中，它使用css-in-js方法。所以我有自定义样式：

export const customStyles = {


 control: (base, state) => ({
        ...base,
    }),

    menu: (base, state) => ({
        ...base,
    }),

    menuList: (base, state) => ({
        ...base,
    }),
}

我如何更改，例如，borderColor如果字段无效？

Answer 1

关于这一点，GitHub上存在一个问题。

我看到两种不同的方法：

1. “懒惰的”边框，您可以通过添加特定的来更改边框颜色className。这里的例子。
2. 当您要自定义原始选择时，我建议将您嵌入customSelect一个单独的文件中。然后，您可以传递道具isValid并使用它来更改您的道具borderColor。

class CustomSelect extends React.Component {
  render() {
    const {
      isValid
    } = this.props
    
    const customStyles = {
      control: (base, state) => ({
        ...base,
        // state.isFocused can display different borderColor if you need it
        borderColor: state.isFocused ?
          '#ddd' : isValid ?
          '#ddd' : 'red',
        // overwrittes hover style
        '&:hover': {
          borderColor: state.isFocused ?
            '#ddd' : isValid ?
            '#ddd' : 'red'
        }
      })
    }
    return <Select styles={ customStyles } {...this.props}/>
  }
}