Le composant parent stocke tout l'état.

La fonction myChangeHandler se déclenche sur n'importe quel onChange et change l'état

myChangeHandler (event) {this.setState ({[event.target.name]: event.target.value});

Et en changeant la valeur du bouton radio devrait revenir dans la ligne "Guide is" Voici le code et faites-moi savoir si je manque quelque chose

// Get a hook function
const {useState} = React;

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      avail:'available',
      $avail:'non-available',
      brandGuideline:'',
    };
    this.myChangeHandler = this.myChangeHandler.bind(this);
  }

  myChangeHandler(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }render(){
    return(
      <div>
        <Child username = {this.state.username}
          myChangeHandler = {this.myChangeHandler}
          />
      </div>
    )
  }
}

class Child extends React.Component {
  render() {
    return (
      <div className="label">
        <label>
          username
        </label>
        <input
          type='text'
          name='username'
          value={this.props.username}
          onChange={this.props.myChangeHandler}
          />
        <h1>My username: {this.props.username}</h1>
        <div>
          <label>
            We have a Brand Guide
          </label>
          <input 
            type='radio'
            name='brandGuideline'
            value={this.props.$avail}
            onChange={this.props.myChangeHandler}
            />Yes
          <input 
            type='radio'
            name='brandGuideline'
            value={this.props.avail}
            onChange={this.props.myChangeHandler}
            /> No
        </div>
        <h1>Guide is: {this.props.brandGuideline}</h1>
      </div>
    );
  }
};

ReactDOM.render(
  <Parent />,
  document.getElementById("react")
);
[event.target.name]: event.target.value
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
0
Tony 4 sept. 2020 à 09:31

2 réponses

Meilleure réponse

Votre problème lié aux données d'accessoires manquantes du parent à l'enfant.

Comme écrire:

value = {this.state.i_am_not_exist_prop};

1/2. Première erreur

Avant

{/* Parent Before */}
<Child username = 
  {this.state.username}
  myChangeHandler = {this.myChangeHandler}
/>

Envoyez avail et $avail comme accessoires.

Devrait être:

{/* Parent After step 1*/}
<Child 
 username = {this.state.username}
 myChangeHandler = {this.myChangeHandler}
 avail= {this.state.avail}
 $avail = {this.state.$avail}
/>

2/2. Deuxième erreur

Composant parent:

myChangeHandler(event) {
  console.log([event.target.name]); /* brandGuideline */
  this.setState({
    [event.target.name]: event.target.value
  })
};

Ceci [event.target.name] = "brandGuideline" (utilisez console.log). Encore une fois, vous devez envoyer ceci comme accessoire à l'enfant.

Passez brandGuideline comme accessoire:

{/* Parent After step 1 & 2 */}
<Child 
  username = {this.state.username}
  myChangeHandler = {this.myChangeHandler}
  avail= {this.state.avail}
  $avail = {this.state.$avail}
  brandGuideline =  {this.state.brandGuideline}
/>

1 + 2 Extrait de travail

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      avail:'available',
      $avail:'non-available',
      brandGuideline:'',
    };
    this.myChangeHandler = this.myChangeHandler.bind(this);
  }

  myChangeHandler(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }render(){
    return(
      <div>
        <Child 
          username = {this.state.username}
          myChangeHandler = {this.myChangeHandler}
          avail= {this.state.avail}
          $avail = {this.state.$avail}
          brandGuideline =  {this.state.brandGuideline}
          />
      </div>
    )
  }
}

class Child extends React.Component {
  render() {
    return (
      <div className="label">
        <label>
          username
        </label>
        <input
          type='text'
          name='username'
          value={this.props.username}
          onChange={this.props.myChangeHandler}
          />
        <h1>My username: {this.props.username}</h1>
        <div>
          <label>
            We have a Brand Guide
          </label>
          <input 
            type='radio'
            name='brandGuideline'
            value={this.props.$avail}
            onChange={this.props.myChangeHandler}
            />Yes
          <input 
            type='radio'
            name='brandGuideline'
            value={this.props.avail}
            onChange={this.props.myChangeHandler}
            /> No 
        </div>
        <h1>Guide is: {this.props.brandGuideline}</h1>
      </div>
    );
  }
};

ReactDOM.render(
  <Parent />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Pratiques relatives aux enfants et aux parents

Si la myChangeHandler fonction est liée spécifiquement au formulaire enfant et n'est pas réutilisable d'une manière ou d'une autre (comme dans votre cas) - il est préférable de mettre la fonction leur au lieu d'envoyer cette fonction comme prop depuis le parent.

Les états avail & $avail peuvent être une unité à un booléen available: true / false (Plus sémantique et utile pour Rendu conditionnel & Plus facile à lire).

Commencer ici:

1
Ezra Siton 4 sept. 2020 à 08:46

Avez-vous manqué de récupérer l'événement passé de l'enfant au parent.

myChangeHandler(event){
......
}
0
Vijay122 4 sept. 2020 à 06:49