const textBold =()=>{ const bold_text=document.getElementsByClassName('.form-control'); bold_text.style.fontStyle = "italic"; setText(bold_text) }
点击按钮后,我会进入浏览器上的一个空白页面。
nc1teljy1#
当您使用getElementsByClassName方法时,它将返回包含给定类的元素数组/集合。如果只有一个元素,则使用.querySelector。或者,如果您更喜欢使用getElementsByClassName方法,则使用for循环或.find()方法找出所需的元素并应用样式。在React中,我认为使用ref s比使用DOMAPI定位元素更好。
getElementsByClassName
.querySelector
.find()
ref
yws3nbqq2#
看起来就像你使用状态一样,但是你不应该混合原生的DOM操作和React--React有它自己的更新DOM的方法,这将与传统的DOM更新方法相冲突;例如:使用getElementsByClassName来更新元素的样式。因此,我们有一个按钮被点击时调用的方法,它会更新状态,还有一个类名的联接数组,它会根据状态而改变,如果状态是true,则添加"italic"类,然后可以在元素上使用该类字符串。此处样式仅应用于输入1和3。
true
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>
2条答案
按热度按时间nc1teljy1#
当您使用
getElementsByClassName
方法时,它将返回包含给定类的元素数组/集合。如果只有一个元素,则使用
.querySelector
。或者,如果您更喜欢使用
getElementsByClassName
方法,则使用for循环或.find()
方法找出所需的元素并应用样式。在React中,我认为使用
ref
s比使用DOMAPI定位元素更好。yws3nbqq2#
看起来就像你使用状态一样,但是你不应该混合原生的DOM操作和React--React有它自己的更新DOM的方法,这将与传统的DOM更新方法相冲突;例如:使用
getElementsByClassName
来更新元素的样式。因此,我们有一个按钮被点击时调用的方法,它会更新状态,还有一个类名的联接数组,它会根据状态而改变,如果状态是
true
,则添加"italic"类,然后可以在元素上使用该类字符串。此处样式仅应用于输入1和3。