#reactjs
#reactjs
Вопрос:
Я работаю в компании, у которой есть веб-сайт, разработанный в ASP.net. В настоящее время один из наших клиентов входит на наш сайт, заполняя форму на своем веб-сайте и отправляя форму нам. Это код их формы:
<body>
<form id="loginform" class="login-form" action="http://mycompany_site.com/loginpage.aspx " method="POST" name="frmLogin">
<p>
<label id="user_login_label" for="user_login">USER ID</label> <input id="user_login" name="user_id" type="input" /><br /><label id="user_pass_label" for="user_pass">PASSWORD</label> <input id="user_pass" name="password" type="password" />
</p>
<p>
<input id="wp-submit" type="submit" value="Sign In" />
</p>
</body>
Страница на сайте моей компании (с использованием Visual Basic) закодирована следующим образом для извлечения двух полей из переданной формы:
Dim mqUserID As String = Request.Form("user_id") " "
Dim mqPassword As String = Request.Form("password") " "
Мы разработали приложение ReactJS, в которое теперь хотели бы, чтобы наш клиент разместил форму вместо текущей страницы .aspx.
Что мы хотели бы сделать, так это попросить моего клиента изменить URL-адрес, который они публикуют, на URL-адрес нашего приложения ReactJS. Чтобы протестировать это, я создал HTML-страницу на своей машине разработки и скопировал в форму моего клиента. Затем я изменил URL в коде, чтобы указать на конечную точку, предоставленную мне AWS. Код, который я выполняю, выглядит следующим образом:
<body>
<form id="loginform" class="login-form" action="http://401kmobileapp.s3-website.us-east-2.amazonaws.com/ " method="POST" name="frmLogin">
<p>
<label id="user_login_label" for="user_login">USER ID</label> <input id="user_login" name="user_id" type="input" /><br /><label id="user_pass_label" for="user_pass">PASSWORD</label> <input id="user_pass" name="password" type="password" />
</p>
<p>
<input id="wp-submit" type="submit" value="Sign In" />
</p>
</body>
Когда я запускаю HTML-код на своем компьютере для разработки, ввожу идентификатор пользователя и пароль и отправляю форму, я получаю этот ответ:
405 Method Not Allowed
Code: MethodNotAllowed
Message: The specified method is not allowed against this resource.
Method: POST
ResourceType: OBJECT
RequestId: 91DA10855CE577C9
HostId: I2e4xaKB1wSyTFfTVlz1LMdJCFNCqgF0abm3dtfFoyk/thNe01ewxbo lV5aLf1Dtn5yEsib938=
Если я введу конечную точку приложения ReactJS в свой браузер и введу идентификатор пользователя и пароль, я смогу успешно войти в систему.
Приложение ReactJS предназначено для поиска строки запроса и использования этих данных для автоматической регистрации пользователя. Если строка запроса не найдена, отображается страница входа в систему.
Какой код потребуется в приложении ReactJS для 1 — устранения ошибки 405 и 2 — извлечения данных формы и автоматического входа пользователя в систему?
Комментарии:
1. Вы спрашиваете, как получить данные формы в React, не получая их по URL?
2. Я могу получить дату из URL-адреса, используя предоставленный мной код, но это приведет к извлечению данных, если они будут переданы в URL, т.Е.: example.com?user_id=xxxxx amp; password = гггг . Я не думал, что данные из формы были переданы в качестве параметра url.
Ответ №1:
В React хорошим способом обработки форм является использование управляемых компонентов (входных данных), состояние которых зависит от состояния содержащего компонента, и переопределение поведения отправки формы по умолчанию.
По сути, вы сохраняете данные формы в состоянии компонента, а затем форма получает свои данные из состояния (вместо того, чтобы хранить сами данные). Это упрощает доступ к данным формы, когда приходит время отправлять форму, поскольку у вас уже есть все данные о состоянии.
Затем, когда пользователь отправляет форму, вы предотвращаете действие отправки HTML по умолчанию и реализуете свое собственное с помощью AJAX, передавая данные формы вместе.
Например:
class LoginFormComponent extends Component {
constructor() {
super();
this.state = {
userId: "",
password: "",
}
}
handleChange = event => {
const {
name: fieldName,
value: fieldValue,
} = event.target;
this.setState(prevState => ({...prevState, fieldName: fieldValue}));
}
handleSubmit = async event => {
event.preventDefault(); // prevent default HTML form submit
const { userId, password } = this.state;
const loginURL = "https://example.com/login"
const response = await fetch(loginURL, {
method: "POST",
body: JSON.stringify({user_id: userId, password: password}),
})
// do something with the response (e.g. check if successful)
}
render() {
const { userId, password } = this.state;
return (
<form onSubmit={ this.handleSubmit }>
<label>User Id</label>
<input type="text" name="userId" value={ userId } onChange={ this.handleChange }/>
<label>Password</label>
<input type="password" name="password" value={ password } onChange={ this.handleChange }/>
</form>
)
}
}
Комментарии:
1. Но разве в вашем примере форма не отображается, а затем реагирует на ввод? Я не собираюсь отображать форму. У моего клиента есть форма на его сайте, и он просто отправляет форму по URL-адресу на моем сервере. Возможно, я не понимаю, что вы пытаетесь продемонстрировать. Насколько я понимаю, форма удалит параметры из URL и поместит их в тело запроса. Вот почему в текущем коде visual Basic .net I мы используем Requerst. Форма, а не запрос. Строка запроса
2. Я думал, вы создаете приложение на React, которое позволяет пользователю входить в существующий. СЕТЕВОЙ сервер. Это неверно?
3. @JonathanSmall Или вы пытаетесь заставить клиента войти в приложение React с существующего сайта? Если да, то как вы передаете пользователя в React?
4. Форма входа размещена на веб-сайте моих клиентов. В настоящее время они отправляют эту форму по определенному URL на мой сервер (www.example.com/somepage.aspx ). URL, на который они отправляют, — это страница Visual Basic .net. Она использует запрос. Команда Form для извлечения двух полей данных формы, которые передает мой клиент. Я хочу, чтобы они могли отправлять форму по URL-адресу ReactJS вместо URL-адреса .net, а затем ReactJS мог запрашивать данные формы и извлекать два передаваемых поля.
5. Хорошо, значит, идентификатор пользователя и пароль будут в строке запроса URL-адреса React? И вы хотите извлечь эти параметры, а затем автоматически передать их на свой сервер для аутентификации?