C'est peut-être une question stupide, alors je m'excuse à l'avance.

J'ai un petit tableau où je l'itère avec this.state.data.map() et passe les données en entrées. Je souhaite modifier les données de chaque entrée et enregistrer les nouvelles données. Puisqu'il s'agit d'un tableau, comment puis-je enregistrer ces nouvelles données dans le tableau? Quelle est la meilleure pratique / la plus intelligente pour cela?

Un exemple vivant ici

Voici un exemple ci-dessous:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: ["Saab", "Volvo", "BMW"],
      editMode: false
    };
  }

  handleInput = e => {
    let value = e.target.value;
    let name = e.target.name;
    console.log(name);
    console.log(value);

    this.setState(prevState => ({
      data: {
        ...prevState.data,
        [name]: value
      }
    }));
  };

  handleFormSubmit = e => {
    e.preventDefault();

    const { data } = this.state;
    console.log(data);
  };

  render() {
    return (
      <div className="App">
        <div>
          {!this.state.editMode ? (
            <button onClick={() => this.setState({ editMode: true })}>
              edit
            </button>
          ) : (
            <div>
              <button onClick={() => this.setState({ editMode: false })}>
                cancel
              </button>
              <button onClick={this.handleFormSubmit}>submit</button>
            </div>
          )}
        </div>

        <React.Fragment>
          {this.state.data.map((rule, index) =>
            this.state.editMode ? (
              <form onSubmit={this.handleFormSubmit}>
                <input
                  onChange={this.handleInput}
                  type="text"
                  placeholder="Cars"
                  name={rule}
                  defaultValue={rule}
                  key={index}
                />
              </form>
            ) : (
              <p key={rule}> - {rule} </p>
            )
          )}
        </React.Fragment>
      </div>
    );
  }
}

Je vous remercie! :)

1
RCohen 27 janv. 2019 à 16:45

3 réponses

Meilleure réponse

Une solution consiste à transmettre le index de l'élément actuellement modifié au gestionnaire d'événements pour vous assurer que vous modifiez l'élément correct dans la liste.

Pour ce faire, modifiez votre handleInput pour accepter à la fois l'objet event et index de l'élément actuellement modifié.

handleInput = (e, index) => {
  const { data = [] } = this.state;
  let value = e.target.value;
  data[index] = value;
  this.setState({ data: data });
};

Vous devez donc changer votre gestionnaire d'entrée onChange en ceci.

onChange={(event) => this.handleInput(event, index)}

Voir exemple de travail

4
Ana Liza Pandac 27 janv. 2019 à 13:59

Le premier problème est que votre data est un tableau tandis que dans handleInput vous l'assignez au object.

Deuxièmement, pour en venir à votre problème, je suppose que l'ordre du tableau est également important. Vous devez définir une nouvelle valeur sur onchange au même index que le précédent. valeur était.

Le code suivant devrait fonctionner:

handleInput = (value, index) => {
  this.setState(prevState => {
    const newData = prevState.data;
    newData[index] = value;
    return {
        data: newData
    };
  });
};

Et input element être comme:

<input
  onChange={(e) => {this.handleInput(e.target.value, index)}
  type="text"
  placeholder="Cars"
  value={rule}
  key={index}
/>
0
Gaurav Saraswat 27 janv. 2019 à 14:08

Faites ceci

handleInput = e => {
  let value = e.target.value;
  let name = [e.target.name];
  console.log(name);
  console.log(value);

   let { data } = this.state;
   data[name]  = value;

    this.setState({data: data});
 };
0
elraphty 27 janv. 2019 à 14:08