Question

我正在尝试从URL中获取查询参数，并使用这些值在加载时设置选定的选项值。目前，我可以访问两个匹配的值，即选项文本和查询参数值。

我最初的想法是在循环中添加一个由if语句设置的变量，该语句检查循环值是否与查询props值匹配，但是却收到有关意外令牌的错误消息。此设置可能有什么问题，并且有更好的方法来设置此评估并将“选择”设置为页面加载时的适当选项？

这是完整的错误消息（错误发生的地方是{{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}>

这是我的反应代码，其中this.props.category是可以查询的每个类别的ID /文本数组，而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匹配并且添加了“选定”字符串

Answer 1

您不能按照自己的操作方式为元素编写道具：<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>
);

旁注：如果您有唯一的categoryName，则不应使用categoryHashId进行识别/比较/选择。当用户选择类别时，请使用其代替名称。您可能需要检查一下您的数据结构以提高效率。

我写了这个示例来满足您的需要，但是如果您在hashId中使用categoryQuery，则可以跳过.find()步骤。

ReactJS根据属性文本匹配设置选择的选项

1 个答案: