reactjs 我想通过单击react中的按钮来更改文本的字体样式

lb3vh1jj  于 2023-02-08  发布在  React
关注(0)|答案(2)|浏览(171)
const textBold =()=>{
  const bold_text=document.getElementsByClassName('.form-control');
  bold_text.style.fontStyle = "italic";
  setText(bold_text)
}

点击按钮后,我会进入浏览器上的一个空白页面。

nc1teljy

nc1teljy1#

当您使用getElementsByClassName方法时,它将返回包含给定类的元素数组/集合。
如果只有一个元素,则使用.querySelector
或者,如果您更喜欢使用getElementsByClassName方法,则使用for循环或.find()方法找出所需的元素并应用样式。
在React中,我认为使用ref s比使用DOMAPI定位元素更好。

yws3nbqq

yws3nbqq2#

看起来就像你使用状态一样,但是你不应该混合原生的DOM操作和React--React有它自己的更新DOM的方法,这将与传统的DOM更新方法相冲突;例如:使用getElementsByClassName来更新元素的样式。
因此,我们有一个按钮被点击时调用的方法,它会更新状态,还有一个类名的联接数组,它会根据状态而改变,如果状态是true,则添加"italic"类,然后可以在元素上使用该类字符串。
此处样式仅应用于输入1和3。

const { useState } = React;

function Example() {

  const [ italic, setItalic ] = useState(false);

  function handleClick() {
    setItalic(true);
  }

  const controlStyle = [
    'form-control',
    italic && 'italic'
  ].join(' ');

  return (
    <div>
      <input
        type="text"
        className={controlStyle}
      />
      <input
        type="text"
        className="form-control"
      />
      <input
        type="text"
        className={controlStyle}
      />
      <button onClick={handleClick}>Click me</button>
    </div>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);
.form-control { color: red; }
.italic { font-style: italic; color: blue; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

相关问题