如何在React中使用MobiScroll条件隐藏弹窗字段或设置为只读

嘿，我来帮你搞定这个问题！在React里用MobiScroll处理字段的只读和隐藏其实挺直接的，咱们结合你的代码一步步来：

1. 把"Category"设置为只读 #

MobiScroll的Select组件自带readonly属性，你只需要把它加到对应的Select标签上就行。如果需要动态控制（比如根据编辑状态切换），还可以结合你现有的状态变量（比如代码里的isEdit）来调整。

比如你想让它一直处于只读状态，直接加readonly={true}就行；要是只有在编辑模式下才只读，就写成readonly={isEdit}。

2. 隐藏"Work Category"字段 #

这里推荐用React的条件渲染逻辑——也就是只有当满足某个条件时，才渲染这个Select组件。你可以自定义一个状态变量（比如showWorkCategory）来控制显示隐藏，也可以直接用现有状态（比如isEdit或者popupEventIsWorkUnit的值）来判断。

如果是要永久隐藏，直接用{false && (...)}包裹组件就行；要是动态隐藏，把false换成你的业务判断条件就好。

修改后的完整代码示例 #

<div className="mbsc-form-group">
  <Textarea
    label="Description"
    value={popupEventDescription}
    onChange={({ target }) => onChange(target.value, 'description')}
  />
  <Textarea label="IsWorkUnit" value={popupEventIsWorkUnit} />
  
  {/* 修改：添加readonly属性，这里示例设为一直只读，可根据你的需求调整条件 */}
  <Select
    label="Category"
    data={popupEventCategories}
    value={popupEventCategory}
    onChange={({ value }) => onChange(value, 'category')}
    readonly={true} 
  />
  
  {/* 条件渲染：替换false为你的判断逻辑，比如popupEventIsWorkUnit !== 'Yes' */}
  {false && (
    <Select
      label="Work Category"
      data={popupEventWorkCategories}
      value={popupEventWorkCategory}
      onChange={({ value }) => onChange(value, 'workCategory')}
    />
  )}
  
  <Select
    selectMultiple={!isEdit}
    label="Engineer"
    data={resources}
    value={popupEventEngineers}
    onChange={({ value }) => onChange(value, 'engineer')}
  />
</div>

举个动态隐藏的例子：如果只有当popupEventIsWorkUnit的值为"Yes"时才显示Work Category，就把条件改成popupEventIsWorkUnit === 'Yes'，完全贴合你的业务场景~

备注：内容来源于stack exchange，提问作者Alistair