[英]How to add the input field inside the select option using ant design and react
I created select option using ant design.But I need create editable cell inside the select option.我使用 ant 设计创建了 select 选项。但是我需要在 select 选项中创建可编辑的单元格。
This my select option code这是我的 select 选项代码
<Select
showSearch
style={{ width: 400 }}
placeholder="Select a Bank"
optionFilterProp="children"
onChange={this.handleChange.bind(this)}
>
<option value="1">Bank1</option>
<option value="2"> Bank2</option>
<option value="3"> Bank3</option>
</Select>
And onChange functions is onChange 函数是
handleChange(value) {
console.log(`selected ${value}`);
this.setState({
bank:value,
});
}
Can you help me?你能帮助我吗?
I suppose the question is whether or not this is an editable list. 我想问题是这是否是可编辑的列表。
The Select component has a mode
prop that can be used to change the functionality with the following options: Select组件具有一个
mode
道具,可使用以下选项来更改功能:
'default' | 'multiple' | 'tags' | 'combobox'
Using the tags mode would allow you to add and remove items and generate a tokenized list when the form is submitted. 使用标签模式将允许您添加和删除项目,并在提交表单时生成标记化列表。
If you are looking at a fixed list and then wanting to create new items to add to the list: 如果您正在查看固定列表,然后想要创建新项目以添加到列表中:
If you want to be able to add new items to the list, this doesn't exist currently, as far as I am aware. 据我所知,如果您希望能够向列表中添加新项目,则当前尚不存在。
You may be able to refashion something from the Ant Design Pro components, or otherwise come up with a solution where: 您可能可以重新设计Ant Design Pro组件中的某些内容,或者提出以下解决方案:
I hope this helps. 我希望这有帮助。
You don't need to do that actually. 您实际上不需要这样做。 All you need to do is to use component
state
and two simple callback functions ant design provides for select. 您需要做的就是使用组件
state
和ant设计提供的两个简单回调函数供select使用。
So let's assume you need to allow users not to also search for existing values inside a Select
but if it didn't exist they can choose a new one. 因此,假设您需要允许用户不要在
Select
内也搜索现有值,但是如果不存在,则可以选择一个新值。 So here's what I'd do: 所以这就是我要做的:
Inside render() method:
内部render()方法:
<Select
showSearch
value={this.title}
filterOption={true}
onSearch={this.handleSearch}
onFocus={this.handleFocus}
style={{ width: "100%" }}>
{this.titles.map((title) => (
<Select.Option key={title}>{title}</Select.Option>
))}
</Select>
Where this.titles = ["something", "else"]
. 其中
this.titles = ["something", "else"]
。
Then Inside
this.handleSearch
andthis.handleFocus
I'd write:然后在
this.handleSearch
和this.handleFocus
里面写:
protected handleSearch = (value: string) => {
this.setState({ titles: value && value !== "" ? [...this.titles, value] : fileTitles });
};
protected handleFocus = () => {
this.setState({ this.titles });
};
What we're basically doing is to populate the options we're iterating over inside the Select
with this.titles
in the state of the component itself (don't confuse it with Redux or MobX) when user opens the selector and once user searches for anything that would be added to options as well. 基本上,我们要做的就是在
Select
使用this.titles
填充我们要遍历的选项。当用户打开选择器并且一旦用户搜索时, this.titles
处于组件本身的状态(不要与Redux或MobX混淆)。也可以添加到选项中。 With this approach you won't need an input or a switch to show/hide inputs. 使用这种方法,您将不需要输入或开关来显示/隐藏输入。 Hope it helps.
希望能帮助到你。
You could use another modal to input the additional value. 您可以使用另一个模式来输入附加值。
Check this : https://codesandbox.io/s/antdselectaddoption-7fov7 检查一下: https : //codesandbox.io/s/antdselectaddoption-7fov7
Code from mamsoudi throws Errors, so i took his idea and made my own component that i'm sharing with you.来自 mamsoudi 的代码会抛出错误,所以我采纳了他的想法并制作了我自己的组件,并与您分享。
import React from 'react';
import {Select} from "antd";
class FieldSelectAndCustomText extends React.Component {
constructor(props) {
super(props);
this.initialTitles = ["something", "else"];
this.state = {
titles: this.initialTitles,
currentValue: null,
};
}
handleSearch = (value) => {
const titles = this.state.titles;
for (let i = 0; i < titles.length; i++) {
const isSearchValueInState = new RegExp(value).test(titles[i]);
if (!isSearchValueInState) {
this.setState({
titles: [...this.initialTitles, value],
currentValue: value
});
break;
}
}
};
handleChange = (value) => {
this.setState(prev => ({...prev, currentValue: value}));
}
render () {
return (
<div>
<Select
showSearch
value={this.state.currentValue}
filterOption={true}
onSearch={this.handleSearch}
onChange={this.handleChange}
onFocus={this.handleFocus}
style={{ width: "100%" }}>
{this.state.titles.map((title) => (
<Select.Option value={title} key={title}>{title}</Select.Option>
))}
</Select>
</div>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.