Блог

У меня есть работающий компонент React reduxForm. Я не могу найти ответ в документации или публикациях, чтобы предварительно заполнить выбранный ввод в форме, а также разрешить изменять ввод.

Должно быть, это легкая вещь, которой мне не хватает.

Проблема заключается только в поле выбора, а не в обработчиках изменений или начальном значении.

 <Form.Label>State</Form.Label>
  <select defaultValue={props.initialValues.state} /*onChange={() => updateReducerStateDD(value)}*/>
    <option onSelect={() => updateHandler("Iowa")} value="IA" selected={props.initialValues.state == "IA" ? true : false}>Iowa</option>
    <option onSelect={() => updateHandler("Washington")} value="WA" selected={props.initialValues.state == "WA" ? true : false}>Washington</option>
    <option onSelect={() => updateHandler("Ohio")} value="OH" selected={props.initialValues.state == "OH" ? true : false}>Ohio</option>
  </select>
 

Используя библиотеку React-Bootstrap, ответ заключается в том, что происходит волшебство, когда обработчик помещается в тег выбора, а event.target.value из выбранного тега опции становится его параметром (автоматически).

Одно из предостережений заключается в том, что вы должны назвать свое значение в объекте базы данных тем же, что вы отображаете в теге option для пользователя (для автоматического заполнения).

 <Form.Group controlId="address.state">
  <Form.Label>State</Form.Label>
  {/*for class-based React component use onChange={this.updateHandler}*/}
  {/*herein updateHandler is 'binded' by being an arrow fn in this component*/}
  <Form.Control as="select" onChange={updateHandler}> 
    <option disabled>States</option>
    <option selected={props.initialValues.state == "Iowa" ? true : false}>Iowa</option>
    <option selected={props.initialValues.state == "Washington" ? true : false}>Washington</option>
    <option selected={props.initialValues.state == "Ohio" ? true : false}>Ohio</option>
  </Form.Control>
</Form.Group>
 

Создайте a const preloadedValue = {selectvalue:'foo'} с вашим предварительно загруженным значением и используйте перехват

 const {register,handleSubmit} = useForm({ defaultValue:preloadedValue});
 

и вместо <select defaultValue={props.initialValues.state} использования

 <select ref = {register} name='selectvalue'..