StencilJS 尝试根据 Prop 输入设置组件的内部输入标签状态

Question

我正在使用 stenciljs 构建自定义 input 标签，但我不明白如何设置 input 和 disabled 或 readonly 状态。我将属性作为具有 3 个属性的 enum 从父级传递给组件，如下所示：

enum INPUT_STATE {
  DISABLED = "disabled",
  READONLY = "readonly",
  DEFAULT = ""
}

组件如下所示：

export class InputFields {

  @Prop() inputState: INPUT_STATE;

  render() {
    return (
      <div class="status">
        <input type="text" {...INPUT_STATE[this.inputState]}/>
      </div>
    );
  }
}

所以基本上我想要做的是在 input 上设置传递的属性，无论是 disabled 还是 readonly 以及一个空字符串默认状态。我怎样才能实现这个功能？

Answer 1

INPUT_STATE 是一个枚举。 INPUT_STATE 值是字符串，因此 INPUT_STATE[this.inputState] 是字符串而不是对象。字符串不直接映射到 jsx 属性 - 你必须明确设置：

<input type="text" disabled={this.inputState === INPUT_STATE.DISABLED}/>

通过使用 watch ，您可以将逻辑移出 JSX：

private inputStateAttr = {};
  
@Prop() inputState: INPUT_STATE;
@Watch('inputState')
handleInputStateChange(value: INPUT_STATE) {
  this.inputStateAttr = {
    disabled: INPUT_STATE.DISABLED === value,
    readonly: INPUT_STATE.READONLY === value
  };
}

render() {
  return (
    <div class="status">
      <input type="text" {...this.inputStateAttr}/>
    </div>
  );
}

StencilJS 尝试根据 Prop 输入设置组件的内部输入标签状态

StencilJS trying to set component's internal input tag state according to Prop input

stenciljs