React-bootstrap FormControl 选择占位符答案

【问题标题】：React-bootstrap FormControl Select placeholderReact-bootstrap FormControl 选择占位符
【发布时间】：2017-12-17 06:55:56
【问题描述】：

尝试为选择字段设置控件，但即使设置了placeholder，它仍然始终自动选择列表中的第一项。

看起来像这样……

export function renderSelector({input, label, placeholder, meta:{touched, warning, error}, title, mandatory, fieldValues, fieldItemKeyFunc, fieldItemLabelFunc, props}) {


 const mappedData = fieldValues.map(v => ({Id: fieldItemKeyFunc(v), Name: fieldItemLabelFunc(v)}));
    let custom = props || {};
    return (
        <FormGroup controlId={input.name} validationState={touched && error ? 'error' : null}>
            <Col xs={12}>
                {renderLabel(title, label, mandatory)}
            </Col>
            <Col xs={12}>
                <FormControl componentClass="select" placeholder={placeholder} name={input.name} {...input} {...custom}>
                    {
                        mappedData.map((item, index) => {
                            return (
                                <option key={index} value={item.Id}>{item.Name}</option>
                            )
                        })
                    }
                </FormControl>
                <FormControl.Feedback/>
                {renderErrBlock(touched, warning, error)}
            </Col>
        </FormGroup>
    );

}

当这个呈现时，选择器总是从选择的第一个项目开始，而不是占位符。我怎样才能解决这个问题？？我尝试只添加一个默认的第一个选项并调整 css，但对于辅助功能来说效果不佳，因为对比度级别

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

有点晚了，但请检查添加此选项是否对您有帮助：

<option key='blankChoice' hidden value />

确保将表单值也检查为空白选项：

<Form.Control
    value=''
>

【讨论】：

【解决方案2】：

你可以这样做：

添加一个

<option disabled value={-1} key={-1}>

，并设置你的

<FormControl value={-1} ...

类似的效果。

【讨论】：

这个选项很烂，但似乎这是唯一的方法

【解决方案3】：

只是放弃一个迟到的答案，以防有人觉得这很有用。

React Bootstrap 的表单 as='select' 似乎不允许 placeholder 开箱即用。将空白值添加到 Form.Control 会使输入无用。在mappedData.map() 上方添加一个额外的option，如下所示：

<option key = 'blankChoice' hidden value> --Your placeholder text-- </option>

【讨论】：

正如上一个答案所说的^^