ReactJS - не может вернуть jsx для функции обратного вызова?
Ваш текущий код (первый подход) передает значение переменной e в качестве параметра данных для вызова $.get. Метод jQuery $.get отправит это как значения строки запроса. Таким образом, ваш код запускает вызов, как показано ниже.
/ViewProfile/howContactTel?testValue
Предполагая, что testValue является значением переменной e
Имя вашего параметра действия tel , Поэтому отправьте js-объект с свойством с этим именем.
Также используйте метод jquery html для обновления внутреннего html вашего div.
$.get("/ViewProfile/ShowContactTel", { tel: e })
.then(function (r){
$('#divTel').html(r);
});
Я бы также рекомендовал используя методы помощника Url для генерации правильных относительных URL-адресов методу действия.
var url = "@Url.Action("ShowContactTel","ViewProfile");
$.get(url, { tel: e }).then(function (r){
$('#divTel').html(r);
});
2 ответа
Вам нужно будет поместить этот компонент в визуализированный JSX или каким-либо образом внедрить его. Вы вызываете handleSubmit внутри возврата вашего рендера?
Один из вариантов - использовать JQuery внутри этого улова, чтобы вставить этот Snackbar на страницу.
Лучший вариант - как-то вызвать этот компонент внутри возврата вашего рендера, как обычно. Например, установите для переменной localState значение error значение true внутри перехвата, а затем условно визуализируйте снэк-бар внутри рендера, исходя из значения this.state.error, равного true.
ваше решение верное, вы также можете делегировать handleSubmit родительскому компоненту, тогда, если у вас есть ошибка, вы отображаете компонент Snackbar, в противном случае вы отображаете компонент Form.
В вашем примере, если вы не хотите публиковать сообщение об ошибке, вы можете деструктурировать объект state для управления свойствами, которые вы хотите отправить.
handleSubmit = (event) => {
const {email, password} = this.state;
event.preventDefault()
//api call here
onFormSubmit({email, password})
.then(() => history.push('/teams'))
.catch(e => this.setState({error: e})
}