React-Bootstrap FormControl Wählen Sie Platzhalter

Question

Versuchen Sie, ein Steuerelement für ein Auswahlfeld einzurichten, aber selbst mit placeholder setzen Sie es immer noch automatisch wählt das erste Element in der Liste.

Es sieht wie folgt aus ...

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> 
    ); 

}

Wenn dies die Wähler macht beginnt immer mit dem ersten Element ausgewählt, anstelle der Platzhalter. Wie kann ich das beheben ?? Ich habe versucht, das Hinzufügen nur eine Standard erste Option und die CSS Anpassung, aber für Zugänglichkeit, das funktioniert nicht so gut, weil die Kontraststufen

Answer 1

Sie etwas tun können:

hinzufügen

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

und Ihr set

<FormControl value={-1} ... 

für einen ähnlichen Effekt.