javascript - Ant Design select tag no data rename - Stack Overflow

admin管理员组

文章数量:1345089

I am using Ant Design select tag, when there is no data available it says 'No Data', is there a way to change that text to something else for example that 'No Data' rename to something else ?

here is example code:

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Select } from 'antd';

const { Option } = Select;

function onChange(value) {
  console.log(`selected ${value}`);
}

function onBlur() {
  console.log('blur');
}

function onFocus() {
  console.log('focus');
}

function onSearch(val) {
  console.log('search:', val);
}

ReactDOM.render(
  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
   
  </Select>,
  document.getElementById('container'),
);

I am using Ant Design select tag, when there is no data available it says 'No Data', is there a way to change that text to something else for example that 'No Data' rename to something else ?

here is example code:

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Select } from 'antd';

const { Option } = Select;

function onChange(value) {
  console.log(`selected ${value}`);
}

function onBlur() {
  console.log('blur');
}

function onFocus() {
  console.log('focus');
}

function onSearch(val) {
  console.log('search:', val);
}

ReactDOM.render(
  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
   
  </Select>,
  document.getElementById('container'),
);

• javascript
• html
• reactjs
• select
• antd

Share Follow edited Apr 9, 2021 at 12:35 Mr. Polywhirl 48.9k1212 gold badges9393 silver badges144144 bronze badges asked Apr 9, 2021 at 12:32 user10727653user10727653 2

• 1 I have provided the remended solution that has been suggested by the Ant Design devs. – Mr. Polywhirl Commented Apr 9, 2021 at 12:58
• If you have questions regarding anything other than setting the empty text, then accept my response and ask another question in regards to disabling (when there is no data) the <Select> ponent. – Mr. Polywhirl Commented Apr 9, 2021 at 13:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

The notFoundContent property will work, but it's a legacy property (still supported).

<Select notFoundContent="No people avaialable"></Select>

There is a closed GitHub ticket (#23064) that explains workarounds and the correct way. You need to wrap your <App> or the ponent in question i.e. <Select> with a <ConfigProvider> and set the renderEmpty prop function. The API explains the usage of renderEmpty.

Property	Description	Type	Default	Version
renderEmpty	Set empty content of ponents. Ref Empty	function(ponentName: string): ReactNode	-

import { ConfigProvider, Select } from "antd";

// ...

<ConfigProvider renderEmpty={() => "No people avaialable"}>
  <Select></Select>
</ConfigProvider>

Use the property notFoundContent

Information on how to use it can be found in the ant design select API documentation under the title:

Select props

https://ant.design/ponents/select/#API

Here is an example of how it can be used:

ReactDOM.render(
  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }


    notFoundContent={"Something Else"}


  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
  </Select>,
  document.getElementById("container")
);

A working example can be found here: https://stackblitz./edit/react-gtuzeh?file=index.js

You can render ponent.

<Select notFoundContent={<div>No Data</div>}></Select>

本文标签： javascriptAnt Design select tag no data renameStack Overflow