reactjs - 类型错误 : Cannot read property 'toLowerCase' of undefined in reactjs

Question

我使用的是antd Design的Select。一切都很好，但当我用一些字母搜索时，我遇到了错误。

Unhandled Runtime Error

TypeError: Cannot read property 'toLowerCase' of undefined

组件代码:

    import React, { Component } from 'react';
    import Link from 'next/link';
    import Router from 'next/router';
    import { Form, Input, Select } from 'antd';
    const { Option } = Select;
    
    class FormCheckoutInformation extends Component {
        constructor(props) {
            super(props);
          
        }
    
     onChange(value) {
          console.log(`selected ${value}`);
        }
        
         onBlur() {
          console.log('blur');
        }
        
         onFocus() {
          console.log('focus');
        }
        
         onSearch(val) {
          console.log('search:', val);
        }
    
        render() {
     return (
            <Form className="ps-form--checkout">
               <div className="ps-form__content">
    
                  <div className="form-group">
                      <Form.Item>
                          {getFieldDecorator('district', {
                              rules: [
                                  {
                                      required: false,
                                      message:
                                          'Enter a district!',
                                  },
                              ],
                          })(
                              <Select
                                  showSearch
                                  style={{ width: 200 }}
                                  placeholder="Select a person"
                                  optionFilterProp="children"
                                  onChange={this.onChange}
                                  onFocus={this.onFocus}
                                  onBlur={this.onBlur}
                                  onSearch={this.onSearch}
                                  filterOption={(input, option) =>
                                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                  }
                              >
                                  <Option value="jack">Jack</Option>
                                  <Option value="lucy">Lucy</Option>
                                  <Option value="tom">Tom</Option>
                              </Select>,
                          )}
                      </Form.Item>
                </div>
             </div>
            </Form>
    );
    } 

我无法找出问题所在，因为我是 React.js 的新手。

Answer 1

您没有正确使用这些值。 ant design中对select进行排序的正确方法是:

filterOption={(input, option) =>
  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}

您需要从option.props访问子项