Как автоматически добавить новый токен в поле выбора? - PullRequest
Новая
       20

Как автоматически добавить новый токен в поле выбора?

0 голосов
/ 14 мая 2019

Я пытаюсь использовать automatic tokenization поле выбора antd как: 

 import { Select } from 'antd';

const Option = Select.Option;

const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

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

ReactDOM.render(
<Select mode="tags" style={{ width: '100%' }} onChange={handleChange} tokenSeparators={[',']}>
    {children}
</Select>,
mountNode,
);

Теперь я хочу динамически добавить токен / тег в поле выбора. Окно токенизации выглядит так:

enter image description here

Я пытаюсь выдвинуть новый токен как: 

children.push(<Option key={newKey}>{newValue}</Option>

Хотя он попадает в поле выбора, но не отображается как один из выбранных токенов в этом поле. Как я мог это сделать? Я должен вручную выбрать добавленный токен. Я хочу, чтобы новый добавленный токен автоматически отображался в поле выбора.

1 Ответ

0 голосов
/ 14 мая 2019

Вы должны useState обновить своих детей: 

import { Select, useState } from 'antd';

const Option = Select.Option;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

function SelectBox () {
  const [children, setChildren] = useState(children);
  return <Select mode="tags" style={{ width: '100%' }} onChange={(value) => setChildren([...children, value])} tokenSeparators={[',']}>
    {children}
  </Select>
}

ReactDOM.render(<SelectBox />, mountNode);

Проверьте документы здесь .

Вот эквивалентность этого кода: 

default class Select extends Component {
  constructor(props) {
    super(props);
    const children = [];
    for (let i = 10; i < 36; i++) {
      children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
    }
    this.setState({children});
  }
  render () {
    const { children } = this.state;
    return <Select mode="tags" style={{ width: '100%' }} onChange={(value) => this.setState({children: [...children, value]})} tokenSeparators={[',']}>
      {children}
    </Select>
  }
}
...