0
276
ViewsEl evento onClick me está enviando al método correcto pero desde dentro de ese método, no está llamando al componente interno y se pierde
Tengo debajo del componente EditAddressPage que cuando hago clic en el botón Entrada manual, debería enviarme al método getAddressField y desde allí ir al componente <AddressFields /> . Veo cuando ocurre onCLick. me esta mandando al metodo getAddressField pero de ahi se pierde. Me preguntaba si alguien me puede dar un segundo para pensar en lo que falta allí porque todo lo que he intentado no funcionó hasta ahora.
import AddressFields from 'components/widget/AddressFields'; import "./EditAddressPage.less"; const EditAddressPage = (props) => { const getManualAddressEntry = () => { return ( <AddressFields {...props} /> ) } return ( <div <div className="body-container"> <span id="manually-enter-section"> {gt.gettext('Can't find your address? ${0}', <Button color="primary" iconSide="left" iconSrc="" onClick={() => getManualAddressEntry()} size="medium" variant="flat" id="manual-entry-button" > Enter it manually </Button> )} </span> </div> ) } export default EditAddressPage; export default class AddressFields extends PureRenderComponent { constructor() { super(); this.x = true; this.y = undefined; this.z = undefined; } componentWillMount() { // something } componentDidMount() { // something } componentWillUnmount() { // something } render() {} }1 answers
Answer question0
Su función getManualAddressEntry() no representa el componente, simplemente lo devuelve como un valor.
Para renderizarlo, puedes usar renderizado condicional así:
<Button color="primary" iconSide="left" iconSrc="" onClick={() => getManualAddressEntry()} size="medium" variant="flat" id="manual-entry-button" > Enter it manually </Button> {buttonClicked && <AddressFields/>} buttonClicked (o el nombre que prefiera) debe ser un estado que inicialmente se establece en false , y getManualAddressEntry() debe alternar entre false y true
const [manualAddressOpen, setManualAddressOpen] = useState(false) const getManualAddressEntry = () => { setManualAddressOpen(!manualAddressOpen) }Ejemplo de representación condicional:
