не работает js код с react компонентой

Question

Есть такой 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>

Answer 1

Старайтесь избегать прямого манипулирования с дом элементами. В официальной документации отлично описано про работу с формами: https://ru.reactjs.org/docs/forms.html

Можете использовать пример, приведенный ниже, он будет работать.


import "./styles.css";

export default function App() {
  const [active, setActive] = useState({ first: false, second: false });

  const handleFocus = ({ target }) => {
    setActive((prev) => {
      return { ...prev, [target.name]: true };
    });
  };
  const handleBlur = ({ target }) => {
    setActive((prev) => {
      return { ...prev, [target.name]: false };
    });
  };

  return (
    <div className="App">
      <form>
        <input
          name="first"
          className={active.first && "focused"}
          onFocus={handleFocus}
          onBlur={handleBlur}
        />
        <input
          name="second"
          className={active.second && "focused"}
          onFocus={handleFocus}
          onBlur={handleBlur}
        />
      </form>
    </div>
  );
}```


  [1]: https://ru.reactjs.org/docs/forms.html

БЛОГ НА HUSL

не работает js код с react компонентой

Ответы (1 шт):