Soy relativamente nuevo en reaccionar y tengo algunos problemas para entender cómo pasar accesorios/estados de un componente secundario a principal. Me las arreglé para implementar algo que funciona pero es extremadamente lento.
Descripción general: estoy tratando de crear un formulario con varios campos de texto de IU de material, con un botón de envío al final para enviar el formulario.
Mi enfoque: estoy usando el estado para actualizar campos de texto individuales en sus entradas y luego actualizo dinámicamente otro estado en el archivo FormSection principal. Una vez que el usuario haga clic en el botón 'Enviar' (aún no implementado), tomará todos los estados de la clase principal.
Clases existentes:
CompanyField Class (será lo mismo para el puesto de trabajo, etc.):
const Root = styled('div')(({ theme }) => ({ })); class CompanyField extends React.Component { state = { company: '' } handleOnChange = (event) => { event.preventDefault(); this.setState({ company: event.target.value.toLowerCase() }); this.props.onCompanyChange(this.state.company); } render() { return ( <Root> <Box noValidate autoComplete="off" > <TextField id = "outlined-basic" label = "Company" variant = "outlined" fullWidth value = {this.state.company} onChange = { this.handleOnChange } /> </Box> </Root> ); } } export default CompanyField;Clase de índice
class FormSection extends React.Component { state = { company: '', jobTitle: '' } onCompanyUpdate = (value) => { this.setState({company: value}) // console.log('Company:', this.state.company); } render() { return ( <FormContainer> <FormContentHeaderWrapper> <FormContentHeader> Company & Job Information </FormContentHeader> </FormContentHeaderWrapper> <FormWrapperFull> <CompanyField onCompanyChange={ this.onCompanyUpdate } /> <JobTitleField onJobTitleChange={ this.onJobTitleUpdate } /> </FormWrapperFull> </FormContainer> ) }¿Alguien podría explicarme si estoy haciendo esto de la manera correcta? De lo contrario, ¿habría una mejor manera de resolver este método de paso de estado?
¡Gracias por adelantado!
Cuando actualiza el componente principal, todo el árbol se vuelve a representar con cada pulsación de tecla. En su caso, su componente es muy pequeño, no debería ser un gran impacto. Hay tres enfoques en mi mente.
En primer lugar, debe usar las herramientas de desarrollo de reacción para investigar más renderizaciones y encontrar el problema real.
Primero: puede usar bibliotecas de validación de formularios. Por ejemplo; "formas de gancho de reacción"
segundo: puede usar la función "React.memo" de React para memorizar componentes.
tercero: puede usar referencias para la gestión del valor de entrada. Agrega valores a ref y, cuando los necesita, itera ese objeto ref. No actualizas el estado. Si no hay una actualización de estado, no habrá una nueva representación.
por ejemplo: En el componente principal:
const values = useRef({description: "", jobtitle: ""}); const onChange(name, value) { values.current[name] = value; }En componente secundario: (debe ser un "componente no controlado")
const handleCompanyChange = (evt) => { const value = evt.target.value; const name = "company"; props.onChange(name, value); }