Javascript 仅从一个字段中删除星号

我有一个自定义组件，它从API中获取值，然后将它们显示给用户，但是在这个组件中，我提供了一个“必需”标志，为标签提供了一个星号，但是我只希望下面看到的一个字段有一个星号，而不是当前出现的两个

<Grid item xs={12} sm={6}>
                        <SearchUsers
                            name="primaryOfficerId"
                            label="PO Responsible"
                            id="primaryOfficerId"
                            onSelect={change.bind(null, 'primaryOfficerId')}
                            error={touched.primaryOfficerId && Boolean(errors.primaryOfficerId)}
                        />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <SearchUsers
                            name="supportOfficerId"
                            label="Support Officer"
                            id="supportOfficerId"
                            onSelect={change.bind(null, 'supportOfficerId')}
                        />
                    </Grid>

现在是我的自定义组件

const Search = (props) => {
const [data, setData] = useState([]);
const [select, setSelect] = useState(0);
const { type: TYPE, name: NAME, label: LABEL, onSelect, filter } = props;

const applyFilter = (data) => {
    let result = data;
    if (filter) {
        result = filter(data);
    }
    return result;
};

useEffect(() => {
    getLookupData(TYPE)
        .then((response) => {
            setData(response);
        })
        .catch((error) => {
            if (error === HttpStatus.NOT_FOUND) {
                setData([]);
            } else {
                throw error;
            }
        });
}, [TYPE]);

const options = applyFilter(data).map((item) => (
    <MenuItem value={item.id} key={item.id}>
        {item[NAME]}
    </MenuItem>
));

const handleChange = (event) => {
    setSelect(event.target.value);
    onSelect && onSelect(event);
};

const { classes } = props;
return (
    <FormControl required className={classes.formControl} id={NAME} error={props.error}>
        <FormControlLabel control={<InputLabel htmlFor={NAME}>{LABEL}</InputLabel>} />
        <Select
            name={TYPE}
            value={select}
            onChange={handleChange}
            disabled={props.disabled || options.length === 0}
            input={<Input name={TYPE} id={NAME} />}
        >
            <MenuItem value="">
                <em>None</em>
            </MenuItem>
            {options}
        </Select>
    </FormControl>
);
};

const Search=（道具）=>{
const[data，setData]=useState（[]）；
const[select，setSelect]=useState（0）；
const{type:type，name:name，label:label，onSelect，filter}=props；
常量applyFilter=（数据）=>{
让结果=数据；
如果（过滤器）{
结果=过滤器（数据）；
}
返回结果；
};
useffect（（）=>{
GetLookUpdatea（类型）
。然后（（响应）=>{
setData（响应）；
})
.catch（（错误）=>{
如果（错误===HttpStatus.未找到）{
setData（[]）；
}否则{
投掷误差；
}
});
}，[类型]；
const options=applyFilter（数据）.map（（项目）=>(
{项目[名称]}
));
常量handleChange=（事件）=>{
设置选择（事件、目标、值）；
onSelect&&onSelect（事件）；
};
常量{classes}=props；
返回(
没有一个
{options}
);
};

下面你可以看到我的问题的图片，既有PO，也有一个星号。我只需要PO有这个星号，但我的组件目前不允许个人

---

只需将

required

属性作为布尔值传递给您的组件，使其可自定义，然后在组件中使其动态：

<FormControl required={props.required}>
  // ... 
</FormControl>

// ... 

---

因此，现在您可以将其与星号一起使用

或不使用

只需将

所需的
道具作为布尔值传递给您的组件即可自定义，然后在组件中使其动态：

<FormControl required={props.required}>
  // ... 
</FormControl>


// ... 

因此，现在您可以将其与星号一起使用
或不使用
向
搜索
组件添加额外的属性
，然后将其用作
FormControl
的属性值：

向
搜索组件添加额外的属性
必需的
，然后将其用作
表单控件的属性值
：


请不要破坏您的帖子，为他人做更多的工作。通过在Stack Exchange网络上发布，您已授予Stack Exchange在下不可撤销的权利，以分发该内容（即，无论您未来的选择如何）。根据堆栈交换策略，帖子的非破坏版本是分发的版本。因此，任何故意破坏行为都将恢复原状。如果你想了解更多关于删除帖子的信息，请参阅：请不要通过破坏你的帖子为其他人做更多的工作。通过在Stack Exchange网络上发布，您已授予Stack Exchange在下不可撤销的权利，以分发该内容（即，无论您未来的选择如何）。根据堆栈交换策略，帖子的非破坏版本是分发的版本。因此，任何故意破坏行为都将恢复原状。如果您想了解有关删除帖子的更多信息，请参阅：