javascript - 在状态变化时 react 内联样式

Question

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

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

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

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

像这样应用它

<input className = {inputClass}

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

Answer 1

在这一行: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 类.希望这能解决另一个问题。