时间戳

首页 > 解决方案 > 如何为“react-select”实现字段验证

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

问题描述

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

export const customStyles = {


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

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

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

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

标签： reactjsreact-select

解决方案

在这一点上， 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}/>
  }
}

推荐阅读