Есть такой js код
const newInputs = document.querySelectorAll('.input')
function focusFunc () {
let parent = this.parentNode
parent.classList.add('focus')
}
function blurFunc () {
let parent = this.parentNode
if (this.value === '') {
parent.classList.remove('focus')
}
}
newInputs.forEach((input) => {
input.addEventListener('focus', focusFunc)
input.addEventListener('blur', blurFunc)
})
и есть react компоненты с которыми не работает этот код
const Textarea = props => {
return (
<div className={props.classes}>
<textarea name="message" className="input"/>
<label htmlFor="">{props.labelText}</label>
<span>{props.spanText}</span>
</div>
)
}
const Input = props => {
return (
<div className={props.classes}>
<input type="text" name="name" className="input"/>
<label htmlFor="">{props.labelText}</label>
<span>{props.spanText}</span>
</div>
)
}
вот место где не работает
<form action="" autoComplete="off">
<h3 className="title">CREATE NOTES</h3>
<Input classes={'input-container'} labelText={'NAME'} spanText={'Username'}/>
<Input classes={'input-container'} labelText={'TITLE'} spanText={'Email'}/>
<Textarea classes={'input-container textarea'} labelText={'NOTE'} spanText={'NOTE'}/>
<Input classes={'input-container'} labelText={'DATE'} spanText={'DATE'}/>
<input type="submit" value="Send" className="btn"/>
</form>
{'input-container'}
- такое лучше стрингом делать"input-container"