Redux-forma błąd v6 pokaz walidacji dla wybranej dziedzinie

Question

W V6 Redux formularza możemy pokazać błędy w normalnych pól wejściowych jak po

Możemy utworzyć niestandardowe renderField jak ten

const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div> 
    <label>{label}</label> 
    <div> 
     <input {...input} placeholder={label} type={type}/> 
     {touched && error && <span>{error}</span>} 
    </div> 
    </div> 
) 

aw forma, tak że możemy użyć niestandardowego renderField

<Field name="username" type="text" component={renderField} label="Username"/> 

teraz muszę wiedzieć, jaki możemy zrobić to samo dla wybranej dziedzinie i jak powinniśmy przejść do opcji rozwijanych ten zwyczaj renderFields, a ny pomysł, aby utworzyć niestandardowy renderField dla select?

Answer 1

Jeśli nie przeszkadza trochę powielania kodu, można zrobić to tak:

const renderSelectField = ({ input, label, type, meta: { touched, error }, children }) => (
    <div> 
    <label>{label}</label> 
    <div> 
     <select {...input}> 
     {children} 
     </select> 
     {touched && error && <span>{error}</span>} 
    </div> 
    </div> 
) 

zużyć w formie:

<Field name="username" component={renderSelectField} label="Username"> 
    { mySelectOptions.map(option => <option value={option.value}>{option.text}</option>) } 
</Field> 

widać, że przechodząc do opcji Do selekcja odbywa się przez props.children, dokładnie tak samo, jak w przypadku korzystania z komponentu Field z component="select".

Jeśli nie chcesz duplikacji, możesz spróbować uczynić oryginalny renderField nieco bardziej inteligentnym. Na przykład można zobaczyć, czy children zawiera znaczniki opcji, a jeśli tak, wyrenderuj <select> zamiast input.