Блог

Я пытаюсь использовать React Bootstrap Typeahead, однако параметры не отображаются в компоненте Typeahead при загрузке страницы.

Код моей страницы выглядит следующим образом:

 const React = require('react');
const Jumbotron = require('react-bootstrap').Jumbotron;
const Container = require('react-bootstrap').Container;
const Form = require('react-bootstrap').Form;
const FormGroup = require('react-bootstrap').FormGroup;
const Button = require('react-bootstrap').Button;
const Typeahead = require('react-bootstrap-typeahead').TypeaheadInputSingle
const AuthorisedLayout = require('./Layouts/authorised');

class Generate extends React.Component {
  render() {
    const options = Object.keys(this.props.musicServices).map((id) => {
      return {id: id, label: this.props.musicServices[id].name }
    });
    console.log(options);
    return (
      <AuthorisedLayout title={this.props.title}>
        <Jumbotron>
          <Container>
            <h1 className="display-3">{this.props.title}</h1>
            <p>HI, this will generate a new key pair to be stored on the server.</p>
            <p>When the generation is complete, a zip file containing the key pair will download to your machine.</p>
          </Container>
        </Jumbotron>
        <Container>
          <Form method='POST'>
            <FormGroup controlId="service">
              <Form.Label>Music Service</Form.Label>
              <Typeahead
                id="service"
                options={options}
                placeholder="Choose a Music Service..."
              />
            </FormGroup>
            <Button variant="primary" type="submit">
              Generate key pair
            </Button>
          </Form>
        </Container>
      </AuthorisedLayout>
    );
  }
}

module.exports = Generate;
  

при этом параметры отображаются в виде:

 [
  { id: '12314645', label: 'amazon' },
  { id: '12354635', label: 'itunes' },
  { id: '12354645', label: 'bleep' }
]
  

Мой заголовок содержит:https://unpkg.com/react-bootstrap-typeahead@5.1.1/css/Typeahead.css и, похоже, загружается правильно. Когда я использую: const Typeahead = require('react-bootstrap-typeahead').TypeaheadInputSingle вместо const Typeahead = require('react-bootstrap-typeahead') or const Typeahead = require('react-bootstrap-typeahead').Typeahead , выпадающее окно и фон отображаются, но не содержат никаких данных … при проверке элемента он отображается как:

<input id="service" options="[object Object],[object Object],[object Object]" placeholder="Choose a Music Service..." class="rbt-input-main form-control rbt-input"> предполагая, что это своего рода чтение параметров, но неверная их интерпретация.

Вам нужно запросить Typeahead компонент, а не TypeaheadInputSingle :

 const Typeahead = require('react-bootstrap-typeahead').Typeahead;
  

TypeaheadInputSingle является подкомпонентом и не может использоваться сам по себе.