Я новичок в реагировании и пытаюсь реализовать раскрывающийся список внутри ячейки таблицы, используя структуру пользовательского интерфейса Ant связь.
Я попытался отобразить компонент Dropdown внутри функции renderCell
, но я застрял.
Моя реализация: кодыпесочница
Может ли кто-нибудь помочь мне с этим?
true Мне нужно выпадающее меню в первый раз или по умолчанию.
Я обновил ответ, и если он работает для вас, примите мой ответ. stackoverflow.com/help/someone-answers
Что касается вашего вопроса, я думаю, вы хотите иметь раскрывающийся список, когда вы нажимаете на ячейку таблицы для редактирования, поправьте меня, если я ошибаюсь?
В вашем коде я увидел, что вместо компонента select
или Dropdown
вы использовали input
.
Я разветвил вашу песочницу, которую вы предоставили, и обновил код. https://codesandbox.io/s/pensive-shamir-lxvk3
Это то, что я сделал, и это работает.
renderCell = form => {
this.form = form;
const { children, dataIndex, record, title } = this.props;
const { editing } = this.state;
const menu = (
<Menu>
<Menu.Item key = "1">1st menu item</Menu.Item>
<Menu.Item key = "2">2nd menu item</Menu.Item>
<Menu.Item key = "3">3rd menu item</Menu.Item>
</Menu>
);
return editing ? (
<Form.Item style = {{ margin: 0 }}>
{form.getFieldDecorator(dataIndex, {
rules: [
{
required: true,
message: `${title} is required.`
}
],
initialValue: record[dataIndex]
})(
<Dropdown overlay = {menu}>
<span style = {{ userSelect: "none" }}>hover on Me</span>
</Dropdown>
)}
</Form.Item>
) : (
<div className = "editable-cell-value-wrap" style = {{ paddingRight: 24 }} onClick = {this.toggleEdit}>
{children}
</div>
);
};
Если вы хотите, чтобы Dropdown отображался по умолчанию, добавьте компонент Dropdown в другое условие.
Note: Please hover on the text.
https://codesandbox.io/s/peaceful-haze-k387u
renderCell = form => {
this.form = form;
const { children, dataIndex, record, title } = this.props;
const { editing } = this.state;
const menu = (
<Menu>
<Menu.Item key = "1">1st menu item</Menu.Item>
<Menu.Item key = "2">2nd menu item</Menu.Item>
<Menu.Item key = "3">3rd menu item</Menu.Item>
</Menu>
);
return editing ? (
<Form.Item style = {{ margin: 0 }}>
{form.getFieldDecorator(dataIndex, {
rules: [
{
required: true,
message: `${title} is required.`
}
],
initialValue: record[dataIndex]
})(<Input ref = {node => (this.input = node)} onPressEnter = {this.save} onBlur = {this.save} />)}
</Form.Item>
) : (
<div className = "editable-cell-value-wrap" style = {{ paddingRight: 24 }} onClick = {this.toggleEdit}>
<Dropdown overlay = {menu}>
<span style = {{ userSelect: "none" }}>{children}</span>
</Dropdown>
</div>
);
};
Не могли бы вы подтвердить, что вам нужно отображать раскрывающийся список по умолчанию или вам это нужно, когда вы нажимаете на ячейку таблицы для редактирования.