如何选择占位符和强制选项？

Question

是否可以设置预设值，以便“选择...”不存在？目前，selectValue设置为占位符文本，但是如果我不想占位符文本，那么select组件最初是要选择的选项之一，并且没有占位符选项？

这是否可行，如果是这样，我如何使用React-select？我一直试图阅读文档并发现一种方法。在React-select演示页面上，没有示例具有禁用查看占位符选项的预选值，而只选择了默认选项或选项，如果退格，则转到默认选择。

这是我第一次使用React-select，所以请放轻松，试着学习如何使用它。还要发布关于如何覆盖样式包的另一个问题，因为文档没有给出如何执行此类操作的明确示例。谢谢！

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import ReactSelect from 'react-select'

export default class Select extends Component {
  static propTypes = {
   options: PropTypes.arrayOf(PropTypes.shape({
    value: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired
  })),
  name: PropTypes.string,
  placeholder: PropTypes.string,
  cb: PropTypes.func
}

state = {
 selectValue: ''
}

handleChange = (value) => (
 this.setState({selectValue: value}, () => {
   if (this.props.cb) {
    this.props.cb(this.state.selectValue)
   }
 })
)

render () {
 const {options, name, placeholder} = this.props
 const {selectValue} = this.state

 return (
   <ReactSelect
     name={name}
     placeholder={selectValue !== '' ? selectValue.value : placeholder}
     onChange={this.handleChange}
     selectValue={selectValue}
     selectClear='false'
     options={options}
   />
  )
 }
}

我想强制用户在CA和NV之间进行选择，没有选择默认值

Answer 1

如果您使用react-select，则只需放入即可完成。没有默认显示。

它会自动显示所选值。如果没有，将显示在这种情况下为空的占位符。我猜你不需要自己定义任何状态。

Answer 2

您可以使用defaultValue属性将一个选项设置为默认选择。这样做不会显示占位符。

<ReactSelect
  ...
  options={options}
  defaultValue={options[0]}
/>