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

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

<template>
    <div class="ratings">
        <div class="rating" v-for="(question, index) in rating_questions">
            <div class="question">
                {{ question.question }}
            </div>

            <div class="answer">
                <div class="rating-stars">
                    <span v-for="i in question.amount_of_stars">
                        <input :id="i" name="rating" v-model="question.answer" type="radio" :value="i" class="radio-btn hide" />
                        <label :for="i" >☆</label>
                    </span>
                    {{ rating_questions[index]['answer'] }}
                    {{index}}
                    <div class="clear"></div>
                </div>
            </div>  

        </div>
        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" id="btn-chat" @click="sendRating">
                Send
            </button>
        </span>
    </div>
</template>

<script>
    export default {
        props: ['user', 'event', 'rating_questions'],

        methods: {
            sendRating() {
                this.$emit('ratingsent', {
                    rating_questions: this.rating_questions
                });
            }
        }    
    }
</script>

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

<option key='blankChoice' hidden value />

Answer 2

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

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

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

Answer 3

您可以这样做：

添加

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

，然后设置

<FormControl value={-1} ...

有类似的效果。

React-bootstrap FormControl选择占位符

3 个答案: