javascript - 对状态变化做出反应内联样式

Question

我有一个输入，我想在状态更改时更改其宽度。我希望它继承所有属性，但只需更改 width 属性。我已经尝试了几件事，但没有任何效果。所以我的风格是这样的

  input: { 
    width: "40vw",
    color: "gray",
    padding: 10,
    height: 30,
  }

我正在检查状态并尝试使用它

 let inputClass = classes.input
    if(navShow) {
      inputClass = classes.input.width === '100vw'
    }

并像这样应用它

<input className = {inputClass}

我希望输入继承所有其他属性。我不想在另一个对象中重写所有这些样式。我怎样才能做到这一点？

score 1 · Accepted Answer

在这一行上：inputClass = classes.input.width === '100vw'您正在重新分配inputClass为boolean. 相反，您应该只修改inputClass'width属性的值，如下所示：

let inputClass = classes.input
    if(navShow) {
      inputClass.width = '100vw'
    }
return (
  <input style={inputClass} />
);

编辑：您应该将 JSX 更改为使用style，而不是className因为您传入的是样式对象而不是 css 类。希望这可以解决另一个问题。

score 0 · Accepted Answer

您可以通过 if 条件使用动态类className

<input className = {navShow ? inputClass : anotherClass} />

inputClass具有特定风格和anotherClass另一种风格

2 回答 2