Ajouter une propriété à un élément par programme

Question

D'accord, ma question est donc de savoir comment je peux ajouter une propriété à un composant par programme, voici mon cas, j'ai ceci dans mon fichier render() par exemple :

              <TextField
                name="password"
                variant="outlined"
                label="Password"
                type="password"
                className={classNames(styles.signUpInputField, styles.override)}
                onChange={this.handleChange}
                onBlur={this.validate}
              ></TextField>

Vous pouvez voir que cela va dans une fonction de validation, c'est une fonction longue donc je vais juste vous donner un exemple et non pas ma fonction de validation réelle :

  validateEmail = event => {
    if (event.target.name !== "email") {
         ///Set HelperText and error props here
    } 
  };

Ce que je veux faire, c'est modifier les éléments de mon fichier <TextField> , à savoir le réglage error= true y helperText= "some error here" Comment puis-je faire cela à l'intérieur de ma fonction ?

EDIT : Je devrais éviter d'utiliser des états, car il y a plusieurs champs qui devraient être assignés exclusivement, et plusieurs états pour chacun d'eux n'est pas une approche propre, je pense.

Answer 1

Vous devez ajouter en utilisant state au lieu de props .

class YourComponent extends React.Component {
 constructor(){
  state = {
   error: false,
   helperText: '',
 }
}

validateEmail = event => {
    if (event.target.name !== "email") {
         ///Set HelperText and error state here
         this.setState({error: true, helperText: "some error here"})
    }
  };

render (
   ...

   <TextField
      name="password" 
      variant="outlined"
      label="Password"
      type="password"
      className={classNames(styles.signUpInputField, styles.override)}
      onChange={this.handleChange}
      onBlur={this.validate}
      error={this.state.error} // add this new line
   />
   <span>{this.state.helperText}</span>

   ....
);
}

Answer 2

Vous devez ajouter un état à votre composant.

Pour les entrées multiples, je procède comme suit este

class MyComponent extends React.Component {
state = {
   error: false,
   helperText: '',
}

validateEmail = event => {
    if (event.target.name !== "email") {
         ///Set HelperText and error props here
         this.setState({error: true, helperText: "some error here"})
    } 
  };

render (
   <TextField
      name="password" 
      variant="outlined"
      label="Password"
      type="password"
      className={classNames(styles.signUpInputField, styles.override)}
      onChange={this.handleChange}
      onBlur={this.validate}
      error={this.state.error}
   />
   {this.state.helperText}
);
}

Answer 3

Pour ajouter des propriétés de manière programmatique, vous pouvez utiliser la syntaxe de diffusion JSX {...props} :

class MyComponent extends React.Component {
state = {
   error: false,
   helperText: '',
   additionalProps: {}
}

validateEmail = event => {
    if (event.target.name !== "email") {
         ///Set HelperText and error props here
         this.setState({
         additionalProps: {error: true, helperText: "some error here"}
         })
    } 
  };

render (
   <TextField
      {...this.state.additionalProps}
      name="password" 
      variant="outlined"
      label="Password"
      type="password"
      className={classNames(styles.signUpInputField, styles.override)}
      onChange={this.handleChange}
      onBlur={this.validate}
      error={this.state.error}
   />
   {this.state.helperText}
);
}

Answer 4

Vous ne pouvez le faire que dans un seul État. Il suffit d'utiliser le onChange() pour modifier l'état en fonction du champ. Si l'on suppose que l'erreur survient dans le champ "email", dans la méthode onChange() du champ email vérifie l'existence d'une erreur et, le cas échéant, modifie l'état (erreur et texte d'aide) en conséquence. Et mettez à jour le champ où l'erreur s'affichera, après avoir mis à jour l'état.