0
votes

Dupliquer des composants avec des valeurs d'état [Code mis à jour pour le problème]

J'ai une vue qui a plusieurs cartes avec des valeurs à l'intérieur de chacune.

Je peux dupliquer une carte. Cependant, cela ne préserve pas les valeurs de la carte dupliquée. P>

Si la carte A a des valeurs à l'intérieur de son état, comment puis-je dire à la vue parent de créer une carte B avec une carte à une carte? P >

Voici ma vue. Je rendu plusieurs cartes p> xxx pré>

Lorsqu'une carte envoie une réponse telle que supprimer ou dupliquer, je vais dans ma fonction CardActionResponse. Voici la partie en double: P>

<CreateVideoCard onChange={cardActionResponse} i={I} data={data} />

reactjs

1 commentaires

Salut. Il y a beaucoup de façons de résoudre ce problème. Qu'avez-vous essayé? Partagez du code afin que les gens puissent vous fournir des conseils qui conviennent à votre situation.

3 Réponses :

0
votes

Si vous publiez un code, il sera utile de répondre.

De toute façon, comme vous ne l'avez pas fait, voici un projet de soln proposé. P>

Passer une fonction de rappel indique Onduplicate () de Parent à CardList -> Carte. Le composant de la carte doit appeler cette fonction onclick de duplicate. p>

Cette fonction Onduplicate mettra à jour l'état parent. Voici un exemple d'exemple P>

const data = [{
      id: 1111,
      name:"some name",
    //THERE ARE OTHER FIELDS I HAVE NOT ADDED
    }]

    const CardList = (props) => (
      <div>
        {props.profiles.map(profile => <Card key={profile.id}  onDuplicate={props.onDuplicate}  profile={...profile}/>)}
      </div>
    );

    class Card extends React.Component {

      duplicate = ()=>{
        console.log(this.props)
        this.props.onDuplicate({...this.props.profile,id: 222})
      }
      render() {
        const profile = this.props.profile;
        return (
          <div className="github-profile">
            <img src={profile.avatar_url} />
            <div className="info">
              <div className="name">{profile.name}</div>
              <div className="company">{profile.company}
              </div>
              <div><button onClick={this.duplicate}>duplicate</button></div>
            </div>
          </div>
        );
      }
    }



    class App extends React.Component {
      state = {
        profiles: data,
      };

      onDuplicate = (profileData)=>{
        console.log("+++++++"+profileData.name+""+profileData.company)
        this.setState(prevState => ({
          profiles: [...prevState.profiles, profileData],
        }));
      }
      render() {
        return (
          <div>
            <CardList profiles={this.state.profiles} onDuplicate={this.onDuplicate}/>
          </div>
        );
      } 
    }

0 commentaires

0
votes

La fonction dupliquer code> doit être à l'intérieur de la carte, puis appeler une fonction dans le parent qui passe l'état actuel.

const Parent = () => {
  const handleDuplicate = (state) => {
    // your logic to create the new card with the initial state
  } 
  <CardA onDuplicate={handleDuplicate}/>
}

const CardA = (props) => {
  const { initialState, onDuplicate } = props;
  const [state, setState] = useState(initialState);

  const duplicate = () => {
    onDuplicate(state);
  }
}

0 commentaires

0
votes

La fonction de clé que j'ai dû utiliser était réactile.CloneElement

J'ai changé mon tableau d'articles sur P>

 items.splice(event[1] + 1, 0, React.cloneElement(items[event[1]], { data: data }))

0 commentaires