如何在 React 中创建一个将新输入的字体粗细更改为粗体的按钮？答案

【问题标题】：How to create a button in React which changes the font-weight of the new input to bold?如何在 React 中创建一个将新输入的字体粗细更改为粗体的按钮？
【发布时间】：2022-08-19 02:22:28
【问题描述】：

import React, { useState } from \"react\";

const App = () => {
  const [isBold, setBold] = useState(false);

  const handleClick = () => {
    setBold((prevValue) => {
      return !prevValue;
    });
  };

  return (
    <div>
      <input
        style={{ fontWeight: isBold ? \"bold\" : \"normal\" }}
        name=\"content\"
      />
      <button onClick={handleClick}>Bold</button>
    </div>
  );
};
export default App;

这改变了整个输入内容的风格，而是我只想更改新输入的字体粗细. 谁能给我完整的代码或简要说明如何创建这样的按钮？

html 中的input 元素不支持格式化文本。所以你只能设置整个输入元素的样式。
那么如何制作这样的按钮以及使用什么来代替输入来创建这样的表单。是否有可能在 react 的帮助下制作这样的按钮。
你可以看看contenteditable，但它会很快变得复杂（可能没那么难你想要的就是大胆)。你可以看看所见即所得的组件

标签： javascript reactjs forms react-hooks

【解决方案1】：

尝试在代码中使用道具。我附上了一个示例代码，您可以尝试对其进行试验。基本上，我所做的是，我使用了 2 种样式，即字体粗细和带有 style 属性的字体样式 here 。请参阅文档以更好地了解 Props。希望这可以帮助！

import React, { useState } from "react";

function Avatar(props) {
  return (
  <img className="avatar" src={props.user.avatar} alt={props.user.name} 
 />
 );
 }

 function UserInfo(props) {
 return (
 <div className="UserInfo">
  <Avatar user={props.user} />
  <div
    className="UserInfo-name"
    style={{ fontWeight: props.fontWeight, fontStyle: props.fontStyle }}
  >
    {props.user.name}
  </div>
  </div>
  );
   }

 export default function Comment(props) {
 const [textBold, setTextBold] = useState("none");
 const [textItalic, setTextItalic] = useState("none");
 const textChangeBold = () => {
 setTextBold("bold", "normal");
  };
 const textChangeItalic = () => {
 setTextItalic("italic");
  };

  return (
  <>
  <div className="card">
    <div className="card-body">
      <h5 className="card-title">
        <div className="Comment">
          <UserInfo user={props.author} />
        </div>
      </h5>
     
      <div className="Comment-text">{props.text}</div>
      <a
        href="https://reactjs.org/docs/components-and-props.html"
        className="card-link"
      >
        Reference
      </a>
    </div>
  </div>

  <div className="card">
    <div className="card-body">
      <h5 className="card-title">
        <div className="Comment">
          <UserInfo
            user={props.author}
            fontWeight={textBold}
            fontStyle={textItalic}
          />
        </div>
      </h5>
      {/* <h6 className="card-subtitle mb-2 text-muted">Card subtitle</h6> */}
      <div className="Comment-text">{props.text}</div>
      <button
        id="boldBtn"
        value={textBold}
        className="btn btn-primary"
        onClick={textChangeBold}
      >
        BOLD
      </button>
      <button
        id="italicBtn"
        value={textItalic}
        className="btn btn-primary"
        onClick={textChangeItalic}
      >
        ITALIC
      </button>
    </div>
  </div>

  </>
  );
  }

【讨论】：