javascript - 对状态更改做出内联样式的 react

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

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

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

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

并像

<input className = {inputClass}

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

最佳答案

在这行上：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类。希望这可以解决其他问题。