元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义

Question

I'm new to react, so maybe it will sound stupid to ask.

I'm try to add a select input on my page but keep getting:

ncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

ncaught TypeError: Cannot read property '__reactInternalInstance$1y5rcyzngdmlzew7wenq4zpvi' of null

My code is:

import React from "react";
import {Input} from "react-bootstrap";

    render() {
            return (
                <div className="pickup-site-filter-container">
                    <span className="pickup-site-filter-label">Filter Locations by</span>
                    <span className="pickup-site-filter-zipCode">Zip Code:
                        <input className="filter-zipCode" type="text" pattern="[0-9]{5}" value={this.state.zipCode}
                               htmlFor="validation-error" ref="zipCode" onChange={this.onChangeZipCode}/>
                    </span>
                    <span className="pickup-site-filter-deliveryDay">Delivery Day:
                        <Input type="select" value="1" ref="valid_for">
                          <option value="1">1 hour</option>
                          <option value="2">1 day</option>
                          <option value="2">5 days</option>
                        </Input>
                    </span>
                    <button className="pickup-site-filter-btn" onClick={this.filterClicked}>FILTER</button>
                </div>)
        }

This is only the render cause i found out that also a select example doesn't work

Answer 1

I changed it to <select> instead using the <Input type='select'> and it worked

 createSelection() {
        let days = [];
        days.push(<option key={8} value="All" onChange={this.onChangeDeliveryDay}>All</option>);
        if(this.props.deliveryDays) {
            for (let i = 0; i <= this.props.deliveryDays.length; i++) {
                days.push(<option key={i} value={this.props.deliveryDays[i]} onChange={this.onChangeDeliveryDay}>{this.props.deliveryDays[i]}</option>);
            }
        }
        return days;
    },
    render() {
        return (
            <div className="pickup-site-filter-container">
                <span className="pickup-site-filter-label">Filter Locations by</span>
                <span className="pickup-site-filter-zipCode">Zip Code:
                    <input className="filter-zipCode" type="text" pattern="[0-9]{5}" value={this.state.zipCode}
                           htmlFor="validation-error" ref="zipCode" onChange={this.onChangeZipCode}/>
                </span>
                <span className="pickup-site-filter-deliveryDay">Delivery Day:
                    <select value="1" ref="valid_for">
                        {this.createSelection()}
                    </select>
                </span>
                <button className="pickup-site-filter-btn" onClick={this.filterClicked}>FILTER</button>
            </div>)
    }

Answer 2

您是否尝试过使用<select></select>代替<input type="select" /> ？