Блог

Главная - Вопросы по программированию - Отреагировать на компонент «добавить» в DOM?

Отреагировать на компонент «добавить» в DOM?

#javascript #reactjs

Вопрос:

Я новичок в реагировании и пытаюсь визуализировать компонент, когда пользователь пытается войти в систему с неверными данными для входа. У меня есть страница Login.jsx, на которой я отображаю форму входа в систему и обрабатываю всю логику входа в асинхронную функцию. Все это прекрасно работает. Если данные для входа неверны, у меня есть ErrorModal компонент, отображаемый в уже установленном div с идентификатором error-modal.

 ReactDOM.render(<ErrorModal />, document.getElementById('error-modal'))
...

function Login() {
  const userRef = React.useRef()
  const passRef = React.useRef()
  const loginErr = React.useRef()
  const handleLogin = async (e) => {
    e.preventDefault()
    requestLogin(userRef.current.value, passRef.current.value, loginErr)
  }

  return (
    <form className='login-form' onSubmit={handleLogin}>
        <Field ref={userRef} label='Username:' type='text' />
        <Field ref={passRef} label='Password:' type='password' />
        <div className='button-wrapper'>
          <button type='submit' className='btn'>Login</button>
        </div>
        <div id='error-modal'></div>
    </form>
  )
}

export default Login

Нужно ли мне, чтобы div с модальной ошибкой уже был в DOM, или я могу просто ErrorModal каким-то образом добавить компонент после другого элемента DOM (например, внутри формы или сразу за ее пределами) и не беспокоиться о том, что div с модальной ошибкой «жестко закодирован»?

Комментарии:

1. Способ реагирования состоит в том, чтобы поместить его в DOM и использовать переменную состояния, чтобы показывать его при необходимости.

2. Нет необходимости безоговорочно отображать модальный код ошибки, который, кстати, вероятно , должен быть компонентом, а не div. Постарайтесь избавиться от привычки использовать DOM напрямую. Когда вы впервые начинаете с React useRef , это запах кода. Используйте useState и обновляйте соответствующие обработчики в своей форме/вводах.

Ответ №1:

Вы должны использовать Условный рендеринг.

Вот пример:

 function Login() {
  const [userCredentials, setUserCredentials] = useState({
    email: "",
    password: ""
  });

  const [error, setError] = useState(false);

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const res = await requestLogin(userCredentials);
      if (!res.ok) {
        throw Error("Login failed...");
      }
    } catch (e) {
      setError(true);
      console.error(e);
    }
  };

  const handleUserCredentialsChange = (e) => {
    setUserCredentials({ ...userCredentials, [e.target.name]: e.target.value });
  };
    
  return (
    <>
      <form onSubmit={handleLogin}>
        <input
          placeholder="Email"
          name="email"
          value={userCredentials.email}
          onChange={handleUserCredentialsChange}
        />
        <input
          placeholder="Password"
          name="password"
          value={userCredentials.password}
          type="password"
          onChange={handleUserCredentialsChange}
        />
        <input type="submit" />
      </form>
      {error amp;amp; (
        <div style={modalContainer}>
          <div style={{ backgroundColor: "aliceblue", padding: 40 }}>
            <h1>Something went wrong...</h1>
            <button onClick={() => setError(false)}>Close</button>
          </div>
        </div>
      )}
    </>
  );
}

function requestLogin(userCredentials) {
  return fetch("api/login", {
    method: "POST",
    body: JSON.stringify(userCredentials),
    headers: {
      "Content-Type": "application/json"
    }
  });
}

const modalContainer = {
  position: "absolute",
  zIndex: 100,
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  backgroundColor: "rgba(0,0,0,0.5)"
};

Проверьте это в песочнице кода, если вы хотите запустить его в браузере.

Ответ №2:

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

 function Login() {
const [error,setError]=React.useState("")
  const userRef = React.useRef()
  const passRef = React.useRef()
  const loginErr = React.useRef()
  const handleLogin = async (e) => {
    e.preventDefault()
    const res=requestLogin(userRef.current.value, passRef.current.value, loginErr)
//assuming that above function does a post call via fetch
//and also assuming that in case of wrong credentials error was passed from backend
   const data=res.json()
   if(!res.ok) setError(data.error);
     
  }

  return (
    <form className='login-form' onSubmit={handleLogin}>
        <Field ref={userRef} label='Username:' type='text' />
        <Field ref={passRef} label='Password:' type='password' />
        <div className='button-wrapper'>
          <button type='submit' className='btn'>Login</button>
        </div>
        <div id='error-modal'>{error.length>0 amp;amp; error}</div>
    </form>
  )
}

export default Login
Метки: