Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

274
Vistas
Estoy aprendiendo React y parece que no puedo definir un componente de función mientras estoy dentro de un componente de clase, ¿es esto cierto o estoy haciendo algo mal?

Como dice el título, intento declarar un componente dentro de mi clase, sin embargo, obtengo un error Indefinido. ¿No puedo hacer esto o lo estoy haciendo mal? Como dije, soy nuevo en React, por lo que cualquier información ayuda. El objetivo general es crear un formulario, pero estoy tratando de hacer que solo aparezcan ciertas opciones dependiendo de cuáles sean las opciones anteriores. Si el código es demasiado, házmelo saber, lo reduciré a lo que importa, pero pensé que proporcionaría todo porque no es tan largo.

 import React, {useState, useMemo} from 'react'; import ReactDOM from 'react-dom/client'; import countryList from 'react-select-country-list'; import './index.css'; //import App from './App'; class StartForm extends React.Component { constructor(props) { super(props); this.state = {}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.options = countryList().getData(); } handleChange(event) { this.setState({[event.target.name]: event.target.value}); //alert('Your favorite flavor is: ' + this.state.value); console.log(this.state.accType); } handleSubmit(event) { //alert('Your favorite flavor is: ' + this.state.value); //event.preventDefault(); } //------------------- THIS COMPONENT CustomOptions(props) { return( <label> <input type="checkbox" id="acss_debit_payments" name="acss_debit_payments" value={this.value.acss_debit_payments} onChange={this.handleChange} />Paneer </label> ); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Select Account Type: <select name="accType" value={this.state.accType} onChange={this.handleChange}> <option value="custom">Custom</option> <option value="express">Express</option> <option value="standard">Standard</option> </select> </label> <br/> <label> Select Country Code(Optional): <select name="country" options={this.options} value={this.state.country} onChange={this.handleChange}/> </label> <br/> <label> Email: <input type="text" name="email" value={this.state.email} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> {this.state.accType == "custom" && <CustomOptions /> } </form> ); } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <StartForm/> </React.StrictMode> );
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Para llamar a CustomOptions , debe hacer referencia a la instancia actual con this :

 <this.CustomOptions />

Ejemplo: https://codesandbox.io/s/happy-swartz-hsm6ng?file=%2Fsrc%2FApp.js

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda