react-component / react-component/table
getColumnSearchProps broken with nested input
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 1.4k
- Fork
- 618
- Merge medio
- 10h 19m
- PR unite (30g)
- 2
Descrizione
Using codes from the example: https://ant.design/components/table/#components-table-demo-custom-filter-panel
getColumnSearchProps = dataIndex => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
ref={node => {
this.searchInput = node;
}}
placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
Search
</Button>
<Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
Reset
</Button>
</Space>
</div>
),
filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
onFilter: (value, record) =>
record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => this.searchInput.select());
}
},
render: text =>
this.state.searchedColumn === dataIndex ? (
<Highlighter
highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
searchWords={[this.state.searchText]}
autoEscape
textToHighlight={text.toString()}
/>
) : (
text
),
});
Error thrown when trying to pass nested values
Sample excerpt from ANTD Table component:
<Table bordered size='small' dataSource={dada} rowKey='_id'>
....
<Column
title='Name'
dataIndex={['profile', 'name']}
{...this.getColumnSearchProps(['profile', 'name'])}
/>
....
// this is referring to the latest breaking change for V4 that changes the `dataIndex` from dot notation to string array path.
The error:
Uncaught TypeError: Cannot read property 'toString' of undefined
Haven't got a clue how to deal with this. Anyone can help?
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Riproduci il caso del valore annidato dell’esempio di filtro personalizzato di Ant Design Table usando dataIndex={['profile', 'name']} e getColumnSearchProps. Inizia tracciando i percorsi onFilter e render intorno al valore annidato del record. Il lavoro è completo quando il filtraggio e il rendering dei valori annidati non generano più il TypeError segnalato.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100