如何在导航栏中导入带有自动完成功能的下拉菜单

Question

我真的是 React 的新手，可能我的代码非常错误，但是如何在 React JS 中使用 bootstrap 在导航栏中创建一个带有自动完成功能的下拉菜单。

我读了太多例子，但我的代码从来没有运行..

我尝试使用 create-select 创建下拉菜单，但我不知道具体怎么做..

我的代码：

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import PropTypes from 'prop-types';
import createClass from 'create-react-class';


export default class Header extends Component {

  var ValuesAsBooleansField = createClass({
    displayName: 'ValuesAsBooleansField',
    propTypes: {
      label: PropTypes.string
    },
    getInitialState () {
      return {
        options: [
          { value: true, label: 'Yes' },
          { value: false, label: 'No' }
        ],
        value: null
      };
    },
    onChange(value) {
      this.setState({ value });
      console.log('Boolean Select value changed to', value);
    },
    render () {
      return (
        <div className="section">
          <h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/BooleanSelect.js">(Source)</a></h3>
          <Select
            onChange={this.onChange}
            options={this.state.options}
            simpleValue
            value={this.state.value}
            />
          <div className="hint">This example uses simple boolean values</div>
        </div>
      );
    }
  });

  module.exports = ValuesAsBooleansField;

  render() {
    return (
      <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse ">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">WeatherGraph</a>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Начало <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Времето</a>
            </li>      
          </ul>
        </div>
      </nav>
    );
  }
}

Answer 1

您混淆了 Es5 和 Es6 编码风格。只需更新您的代码，它现在工作正常。

import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
export default class ValuesAsBooleansField extends Component {

    constructor(props){
      super(props);
      this.state = {
        options: [
          { value: true, label: 'Yes' },
          { value: false, label: 'No' }
        ],
        value: null
      }
      this.onChange = this.onChange.bind(this);
    }
    onChange(event) {
      this.setState({value: event.value});
      console.log('Boolean Select value changed to', event.value);
    }

    render () {
      return (
        <div className="section">
          <h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/BooleanSelect.js">(Source)</a></h3>
          <Select
            onChange={this.onChange}
            options={this.state.options}
            value={this.state.value}
            />
          <div className="hint">This example uses simple boolean values</div>
        </div>
      );
    }

}

****************** 将此代码粘贴到 Header.js 文件中 *************

import React, { Component } from 'react';
import ValuesAsBooleansField from './ValuesAsBooleansField';

export default class Header extends Component {



    render() {
      return (
        <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse ">
          <button class="navbar-toggler navbar-toggler-right" 
            type="button" data-toggle="collapse" 
            data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <ValuesAsBooleansField />
          <a class="navbar-brand" >WeatherGraph</a>
          <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
              <li class="nav-item active">
                <a class="nav-link">Начало <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link">Времето</a>
              </li>      
            </ul>
          </div>
        </nav>
      );
    }
  }

如何在导航栏中导入带有自动完成功能的下拉菜单

How to import dropdown with autocomplete in the navbar

javascript

reactjs

react-select