React-bootstrap FormControl 选择占位符

Question

尝试为选择字段设置控件但即使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，但是对于辅助功能来说效果不佳，因为对比度级别

Answer 1

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

<option key='blankChoice' hidden value />

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

<Form.Control
    value=''
>

Answer 2

你可以这样做：

添加一个

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

，并设置你的

<FormControl value={-1} ...

以获得类似的效果。