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

看起来就像你使用状态一样，但是你不应该混合原生的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>