Bonjour, j'ai un problème que je ne sais pas comment résoudre.

J'ai un formulaire simple où l'utilisateur tape som input. Après cela, lorsqu'il clique sur le bouton, le prénom, le nom et l'image seront affichés sous le formulaire. Et lorsque je clique sur l'entrée, l'adresse et la date s'affichent.

Mais j'ai du mal à faire ça. Dans App.js, j'ai un état qui initialli si un tableau vide et après avoir cliqué sur le bouton de soumission, les entrées de l'utilisateur sont ajoutées à ce tableau vide. Dans Suggestions.js, je mappe le tableau des suggestions pour afficher chaque suggestion de l'utilisateur.

Dans UserInputs.js, j'ai un état où j'ajoute à l'état un "visible" à faux et je veux faire, lorsque j'ai cliqué sur une suggestion dans une liste, la description et la date s'afficheront sous cette suggestion particulière.

Je veux faire comme ça. Dans App.js

const detail = (suggestion) => {
        
        setSuggestions([...suggestions]); //but I don't know how to set state for particular 
                                            suggestion in the array.
      };

Mon code:

App.js

import React, { useState } from "react";
import Suggestions from "./components/Suggestions";
import UserInputs from "./components/UserInputs";

function App() {
  const [suggestions, setSuggestions] = useState([]);

  const addNewSuggestion = (suggestion) => {
    setSuggestions([suggestion, ...suggestions]);
  };

  const detail = (suggestion) => {
    
    setSuggestions([...suggestions]);
  };

  console.log("suggestions", suggestions);

  return (
    <div className="app-container">
      <UserInputs addNewSuggestion={addNewSuggestion}></UserInputs>
      <Suggestions suggestions={suggestions} detail={detail}></Suggestions>
    </div>
  );
}

export default App;

Suggestions.js

import React from "react";

export default function Suggestions({ suggestions, detail }) {
  return (
    <div className="suggestion-container">
      <h1 className="suggestion-heading">Zoznam Podnetov</h1>
      {suggestions.map((suggestion, index) => {
        return (
          <div
            key={suggestion.id}
            className="suggestion"
            onClick={() => detail(suggestion)}
          >
            <div className="suggestion-number">{index + 1}</div>

            <div className="suggestion-details">
              <div className="suggestion-name">
                {suggestion.firstName}
                {` ${suggestion.lastName}`}
              </div>

              <div className="suggestion-address">{suggestion.address}</div>
              {suggestion.visible ? (
                <div className="suggestion-description">
                  <p>{suggestion.description}</p>
                  <p>Podnet bol pridaný: {suggestion.date}</p>
                </div>
              ) : null}
            </div>

            <div className="suggestion-picture">
              <img
                src={suggestion.picture}
                alt="obrázok"
                className="suggestion-picture"
              ></img>
            </div>
          </div>
        );
      })}
    </div>
  );
}

Userinputs.js

import React, { useState } from "react";

export default function UserInputs({ addNewSuggestion }) {
  const randomId = Math.floor(Math.random() * 1000000);

  const [userInputs, setUserInputs] = useState({
    id: randomId,
    firstName: "",
    lastName: "",
    address: "",
    description: "",
    picture: null,
    date: new Date().toLocaleDateString(),
    visible: true,
  });

  const onInputChange = (event) => {
    setUserInputs({
      ...userInputs,
      [event.target.name]: event.target.value,
    });
  };

  const fileSelectHandler = (event) => {
    setUserInputs({
      ...userInputs,
      picture: URL.createObjectURL(event.target.files[0]),
    });
  };

  const onSubmit = (event) => {
    event.preventDefault();

    addNewSuggestion(userInputs);

    setUserInputs({
      id: randomId,
      firstName: "",
      lastName: "",
      address: "",
      description: "",
      picture: null,
      date: new Date().toLocaleDateString(),
      visible: true,
    });
  };

  return (
    <div>
      <form className="form-container">
        <div className="row">
          <label>Meno</label>
          <input
            autoFocus
            type="text"
            name="firstName"
            value={userInputs.firstName}
            onChange={onInputChange}
          ></input>
        </div>

        <div className="row">
          <label>Priezvisko</label>
          <input
            type="text"
            name="lastName"
            value={userInputs.lastName}
            onChange={onInputChange}
          ></input>
        </div>

        <div className="row">
          <label>Adresa</label>
          <input
            type="text"
            name="address"
            value={userInputs.address}
            onChange={onInputChange}
          ></input>
        </div>

        <div className="row">
          <label>Popis</label>
          <input
            type="text"
            name="description"
            value={userInputs.description}
            onChange={onInputChange}
          ></input>
        </div>

        <div className="row">
          <input type="file" onChange={fileSelectHandler}></input>
        </div>

        <button onClick={onSubmit} className="button">
          Odoslať
        </button>
      </form>
    </div>
  );
}

Merci beaucoup pour votre aide.

0
Martin 9 oct. 2020 à 08:09

1 réponse

Meilleure réponse

Vous pouvez mettre à jour la suggestion, où l'ID correspond à la suggestion d'entrée et la mettre à jour uniquement. Veuillez trouver le code ci-dessous :

const detail = (suggestion) => { 

  let tempSuggestions = suggestions.map( (item) => {  
  if(item.id === suggestion.id) return suggestion
  return item
})
        
setSuggestions([...tempSuggestions]);                                            
}
2
Praveen Mathew Philip 9 oct. 2020 à 06:26