Как я могу установить пользовательскую действительность, чтобы в ней была ссылка?

Question

[Durin Qurkingo]

У меня есть настраиваемая функция для определения имени пользователя или адреса электронной почты, и я хочу дать пользователю возможность оттуда войти в систему. Это возможно?

Я попытался создать объект для объекта Link, из реактивного маршрутизатора DOM, но он не появляется, когда добавляется запятая, или возвращает объект объекта, когда вставляется со знаком плюс. Я хочу, чтобы в уведомлении, полученном по электронной почте, была указана ссылка, чтобы пользователь мог напрямую щелкнуть по имени входа.

handleSubmit = async (e) => {
        e.preventDefault();
        const EmailField = document.getElementById('email'); 
        const userField = document.getElementById('username');
        const signinRedirect = <Link to='/signin'> login </Link>;
        const newUser = {
            username : this.state.username, 
            email : this.state.email, 
            password : this.state.password, 
            confirmPassword : this.state.confirmPassword, 
        }; 
        //check passwords match before submitting
        if (this.state.passwordsMatch) {
            let url = window.location.hostname.split('.')[0] === 'localhost' ?  'http://localhost:3306' : 'https://petsosbackend.apps.nonprod-mpn.ro11.allstate.com';
            try {
            await axios.post(url + '/register', newUser)
            .then(res=> {
              if (res.status===202) {
                this.props.history.push('/registersuccess');
                //if email is taken
              } else if (res.data==='email'){                
              EmailField.setCustomValidity('Email address is in use, please select another or '+ {signinRedirect}); 
                EmailField.reportValidity();
                //if name is taken       
              } else if (res.data==='name') {       
                userField.setCustomValidity('Username is in use, please select another or' + signinRedirect); 
                userField.reportValidity();
              }
            })            
            } catch(error) { 

              console.log("Catch = ", error.response); 


            }
        }

    }

Очевидно, здесь больше логики, но подумайте, что это две ключевые части, и вам просто нужно выяснить, как сделать, чтобы signinRedirect появлялся в предупреждении о валидности.

Большое спасибо!..

Answer 1

[Антон Спирин]

Принцип:

const Example = () => (
  <div className="form-control">
    <input type="text" name="email" value={email} onChange={handleChange} />
    {isEmailInUse && (
      <div className="error">
        Email address is in use, please select another or <Link to='/signin'>Sign in</Link>
      </div>
    )}
  </div>
);

Comments

[Durin Qurkingo]

Антон Спирин Я использую это в const? Не очень уверен, где поставить эту логику?

[Антон Спирин]

Durin Qurkingo, это надо писать в render методе вашего компонента.

[Durin Qurkingo]

Антон Спирин, Я обновил основной раздел, чтобы он содержал весь метод. Я хочу получить предупреждение о том, что в электронное письмо включена ссылка на другую страницу или тег, если это более целесообразно. Можно ли иметь JSX или HTML в строке проверки?

[Антон Спирин]

Durin Qurkingo, вы пытаетесь использовать в методе для нативных сообщений для валидации JSX. Так делать нельзя.
JSX не имеет ничего общего с HTML, помимо того, что является способом описания структуры документа и похожего синтаксиса.
JSX в деталях.
JSX - подробности.

Просто не используйте нативные средства для сообщений об ошибках. Используйте собственные решения, вроде того, что я привел в ответе.

Еще вы неправильно работаете с DOM элементами. В React принято использовать Ref API или контролируемые компоненты.

И в коде по возможности не должно быть никаких условий вроде:

window.location.hostname.split('.')[0] === 'localhost'

Для подобных задач есть env переменные и конфигурации. Вы можете задать BASE_URL и использовать разные значения для разных режимов.