Tengo un problema con un componente de reacción. Se supone que debe probar, cada vez que se cambia el valor del campo, si el valor en el campo es diferente del valor de la propiedad, pero una vez que se cambia parece que también cambia la propiedad.
handleChange = (id, event) => { this.props.test(id, event.target.value) if (this.validate(event.target.value) || (event.target.value === "" && !this.props.required)) { this.setState({ valid: true }) this.props.canSubmit(true) } else { this.setState({ valid: false }) this.props.canSubmit(false) } if (event.target.value !== this.props.field_value) { this.setState({ changed: true }) } else { this.setState({ changed: false }) } render() { return ( <div className="mb-3" > <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <span> <TextField id="outlined-basic" variant="standard" type="text" aria-describedby="emailHelp" value={this.props.field_value || ""} onChange={event => this.handleChange(this.props.field_id, event)} label={this.props.field_label} error={!this.state.valid} /> <Icon onClick={this.handleDescription} className="description">help_outlined</Icon> {this.state.changed ? <Icon>edit</Icon> : null} </span> </div>También intenté guardar el valor de prop en un estado, que tampoco funciona. ¿Alguien tiene alguna idea?
Editar:
Para mayor aclaración, el problema que tengo es que el valor de prop cambia cada vez que cambia el valor del campo, lo que significa que una vez que cambio el valor en el campo, siempre pensará que es diferente del valor original. Por ejemplo: digamos que un campo de correo electrónico tiene un valor predeterminado de "a@a.com", luego lo cambio a "b@a.com". Ahora dice que es diferente, y es correcto. El problema es cuando lo cambio de nuevo a "a@a.com", ahora considera el valor de la propiedad como el anterior "b@a.com" y, por lo tanto, piensa que es diferente aunque sea lo mismo.
Ha establecido un indicador que está establecido en verdadero/falso en su código, que a su vez le dice si tiene algo en su campo de texto o no. La bandera no le dice qué valor tiene en el campo de texto.
Por lo tanto, será algo así como el código a continuación si es lo que está buscando:
import React, { Component } from "react"; import Grid from "@material-ui/core/Grid"; import Button from "@material-ui/core/Button"; import TextField from "@material-ui/core/TextField"; class MainPage extends Component { constructor() { super(); this.state = { title: "", subtitle: "", flag: false, }; } handleFilterChange = (event) => { this.setState({ [event.target.name]: event.target.value }); if (this.state.title || this.state.subtitle) { this.setState({ flag: true }); } else { this.setState({ flag: false }); } }; fetchOrdersByQuery = async () => { //code for search } resetFilter = async () => { this.setState({ head: "", subhead: "", flag: false, }); }; render() { const { classes } = this.props; return ( <Grid> <Grid item xs={4}> <TextField fullWidth margin="dense" name="title" label="Title" value={this.state.title} variant="outlined" onChange={this.handleFilterChange} /> </Grid> <Grid item xs={4}> <TextField fullWidth margin="dense" name="subtitle" label="Sub-Title" value={this.state.subtitle} variant="outlined" onChange={this.handleFilterChange} /> </Grid> <Grid item xs={2}> <Button type="submit" fullWidth variant="contained" margin="normal" onClick={this.resetFilter} > {" "} Reset </Button> </Grid> <Grid item xs={2}> <Button type="submit" fullWidth variant="contained" margin="normal" color="primary" onClick={this.fetchOrdersByQuery} > Search </Button> </Grid> </Grid> ); } } export default (MainPage);