Question

我很反应，所以也许这听起来很愚蠢。

我尝试在我的页面上添加一个选择输入，但不断获取：

ncaught Invariant Violation：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。

ncaught TypeError：无法读取null的属性'__reactInternalInstance $ 1y5rcyzngdmlzew7wenq4zpvi'

我的代码是：

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>)
        }

这只是我发现的渲染原因，也是一个选择的例子不起作用

Answer 1

我使用<select>将其更改为<Input type='select'> 它工作了

 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" />？

元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined

2 个答案: