如何使用论坛反应动态更改按钮样式？

【问题标题】：How to dynamically change button style using forums react?如何使用论坛反应动态更改按钮样式？
【发布时间】：2021-07-20 04:57:14
【问题描述】：

我希望用户输入按钮的颜色并让它动态地更改为用户输入的任何颜色。我还是新手，无法做出反应并试图弄清楚。

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("white");

  function handleChange(event) {
    console.log(event.target.value);
    setName(event.target.value);
  }

  return (
    <div className="container">
      <h1>{name}</h1>
      <input
        onChange={handleChange}
        type="text"
        placeholder="What's your name?"
      />

      <button type="text" style={{ backgroundColor: { name } }}>
        Submit
      </button>
    </div>
  );
}

export default App;

【问题讨论】：

标签： html css reactjs button background-color

【解决方案1】：

backgroudColor 属性应设置为string（仅name）而不是对象（{ name }）

所以这个

<button type="text" style={{ backgroundColor: { name } }}>
  Submit
</button>

应该是这个

<button type="text" style={{ backgroundColor: name }}>
  Submit
</button>

【讨论】：

【解决方案2】：

删除括号，如： style={{ backgroundColor: name }}

【讨论】：