reactjs - 如何为 'react-select' 实现字段验证

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 上存在一个问题。

我看到两种不同的方法:

是“懒惰”的，您可以通过添加特定的 className 来更改边框颜色。 Example here 。

由于您想自定义原始选择，我建议将您的 customSelect 嵌入到单独的文件中。然后你可以传递一个 Prop 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}/>
  }
}