基于支持文本匹配的ReactJS集选择选项
我试图从url中获取查询参数，并使用这些值在加载时设置所选的选项值。目前，我可以访问两个匹配的值，即选项文本和查询参数值。
我最初的想法是在我的循环中添加一个变量，该变量由一个if语句设置，该语句检查循环值是否与查询支持值匹配，但我得到了一个关于意外令牌的错误消息。这个设置可能有什么问题，还有一个更好的方法来设置这个评估，并在页面加载时将"select“设置为适当的选项？
以下是完整的错误消息({selected}是发生错误的地方)：
ERROR in ./public/components/app/activity-feed/search-form.js
Module build failed: SyntaxError: Unexpected token, expected ... (45:102)
43 | selected = 'selected';
44 | }
> 45 | return ( <option value={category.categoryHashId} {selected}>下面是我的react代码，其中this.props.category是每个类别的is /文本数组，可以查询，this.props.categoryQuery是当前作为查询参数的文本值：
<select name="category" className="form-control filter-category">
{ this.props.category.map( (category) => { var selected; if(category.categoryName == this.props.categoryQuery){ selected = 'selected'; } return (
<option value={category.categoryHashId} {selected}>{category.categoryName}</option> ) } ) }
</select>例如，this.props.categoryQuery是Blog，在8个this.props.category.categoryName数组值中，Blog匹配并添加了一个“选择”字符串。
回答 1
Stack Overflow用户
发布于 2019-01-03 04:40:39
不能像您正在做的那样为元素编写道具：<tag {someValue}/>。
相反，将一个value属性传递给select元素，将一个defaultValue传递给option元素：
const {
category,
categoryQuery
} = this.props;
const selectedCategory = category.find((val) => {
return val.categoryName === categoryQuery;
})
return (
<select
name="category"
className="form-control filter-category"
value={selectedCategory.categoryHashId}
>
{category.map((cat) => {
return (
<option
key={cat.categoryHashId}
defaultValue={cat.categoryHashId}
>
{cat.categoryName}
</option>
);
})}
</select>
);Sidenote：如果您有唯一的categoryHashId，则不应该使用categoryName进行标识/比较/选择。当用户选择类别时，请使用此选项而不是名称。为了提高效率，您可能需要查看一下您的数据结构。
我编写这个示例是为了满足您的需要，但是如果在hashId中使用categoryQuery，则可以跳过.find()步骤。
https://stackoverflow.com/questions/54022351
复制相似问题
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
