Вызовите функциональный компонент при нажатии кнопки в ответ
У меня есть функциональный компонент, внутри которого у меня есть кнопка. Я хочу вызвать функциональный компонент при нажатии этой кнопки.
Когда мы нажимаем кнопку «Отправить», появляется кнопка «Предварительный просмотр», а когда пользователь нажимает кнопку предварительного просмотра, вызывается функциональный компонент «Предварительный просмотр».
const Form =(props)=>{
handlePreview=(e)=>{
e.preventDefault();
return <Preview/>
}
return(
<input name = "email" type = "text"/>
<button type = "submit" onClick = {props.handleSubmit}>Submit</button><br/>
{props.render&&
<button type = "submit" onClick = {handlePreview}>Preview</button>
}
)
}
Когда я нажимаю кнопку «Отправить», появляется кнопка «Просмотр», но когда я нажимаю кнопку «Просмотр», она не переходит к функциональному компоненту <Preview>.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Чтобы отрендерить компонент, вы должны вернуть его из функции Form. Если вы вернете какой-либо компонент из обработчика событий, он будет проигнорирован.
Итак, чтобы показать компонент <Preview/>, вы должны создать локальное состояние. В функциональных компонентах это можно сделать с помощью Реагировать на хуки, как показано ниже.
const Form =(props)=>{
const [isPreviewShown, setPreviewShown] = useState(false);
handlePreview=(e)=>{
e.preventDefault();
setPreviewShown(true); // Here we change state
}
return(
<input name = "email" type = "text"/>
<button type = "submit" onClick = {props.handleSubmit}>Submit</button><br/>
{props.render&&
<button type = "submit" onClick = {handlePreview}>Preview</button>
}
{isPreviewShown && <Preview/>}
)
}
Прежде чем делиться ответами в hooks, я предлагаю уточнить версию ReactJS, которую использует OP, потому что многие проекты ReactJS все еще не поддерживают hooks, на случай, если OP задастся вопросом, почему ваш ответ не работает. (кстати, я проголосовал за)
Вы должны включить свой компонент
PreviewвForm, если хотите отображать их условно и управлять черезstate