javascript - 如何使用反应使下拉列表中的选项可选?
问题描述
我是编程新手。我想在用户输入@字符时显示用户列表,并在用户输入@somestring时过滤用户列表。我在 div 中显示了过滤后的列表。现在我希望它们是可选的,一旦用户单击该选项,它应该将选择的选项连接到输入字段中已输入的文本中。
因此,例如,如果用户输入 hello @,则应列出所有用户的下拉列表,当他选择其中一个选项说 user1 时,输入现在应该看起来像 hello user1。我该怎么做。
以下是我迄今为止尝试过的,
class UserMention extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
text:'',
user_mention:false,
};
this.user='';
}
get_user = s => s.includes('@') && s.substr(s.lastIndexOf('@')
+ 1).split(' ')[0];
user_list = [
{name: 'user1'},
{name: 'first_user'},
{name: 'second_user'},
];
handle_input_change = (event) => {
let is_user_mention;
if (event.target.value.endsWith('@')) {
is_user_mention = true;
} else {
is_user_mention = false;
}
this.setState({
is_user_mention: is_user_mention,
[event.target.name]: event.target.value,
});
this.user = this.get_user(event.targe.value);
}
render = () => {
const user_mention_name = get_user(this.state.text);
return {
<input
required
name="text"
value={this.state.text}
onChange={this.handle_input_change}
type="text"/>
{this.state.is_user_mention &&
<div
className="user_mention_dropdown"
style={{
}}>
{this.user_mention_list
.map((o,index) => (
<div
key={index}
style={{
padding: '10px 20px',
}}>
{o.user_name}</div> ))
}
</div>}
{this.user &&
<div>
{this.user_list.filter(user =>
user.name.indexOf(this.user)
!== -1).map((user,index) => (
<div key={index}>{user.name}
</div>
))
}
</div>
}
);};}
解决方案
好的,我找到了我的问题的答案。我创建了一个组件来选择该选项。代码如下,
export default class SelectOptions extends React.PureComponent {
handle_option_select = (value) => {
this.props.on_change(value);
};
render() {
return (
<div>
{this.props.values.map((value, index) =>
<Option
value={value.user_name}
on_select={this.handle_option_select}/>
)}
</div>
);
}
}
export class Option extends React.PureComponent {
handle_option_select = () => {
this.props.on_select(this.props.value);
};
render = () => {
return (
<div onClick={this.handle_option_select}>
{this.props.value}
</div>
);
}
}
在 usermention 组件中使用它,如下所示,
<Select
on_change={this.handle_select_value}
values={values}
/>}
推荐阅读
- javascript - 是否可以使用 for 循环生成反应道具?
- heroku - 我的免费 webapp dyno 是否有博客,如果有,我如何查看它?
- javascript - 身份验证将我带到个人资料编辑页面
- automationanywhere - 在任何地方以自动化方式杀死谷歌浏览器进程的正确方法
- python - 访问类内常量全局范围变量的 Pythonic 方式?
- javascript - 显示一些标记导致其他标记消失
- c# - DbSet AddOrUpdate 的模拟无法更新我的对象
- javascript - 具有相同值的选择器的 JSS 数组
- c++ - 将 const &variable 传递给函数而不是变量
- awk - 有没有办法将用户输入变量中的特殊字符视为文字?