При нажатии кнопки редактирования отобразить данные строки в текстовом поле ввода и обновить новые значения в той же строке в React js.

Question

Я новичок, чтобы отреагировать js, и я разрабатываю форму, в которой пользователь вводит имя, и при нажатии кнопки добавления данные отображаются в таблице. При нажатии кнопки редактирования данные выбранной строки должны отображаться при вводе формы и обновлять значения при нажатии кнопки добавления. Я не могу закодировать логи c для того же. Было бы очень полезно, если бы кто-нибудь предоставил решение для операции обновления. Ниже мое кодирование

Приложение. js

import React, { Component } from 'react';
import Table from './Table';
import Form from './Form';
import './App.css';

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

        this.state = {
            id: 1,
            firstname: '',
            items: []
        }
    };
 handleFormSubmit = (e) => {
        e.preventDefault();

        let items = [...this.state.items];

        items.push({
            id: this.state.id,
            firstname: this.state.firstname,

        });

        this.setState({
            items,
            id: this.state.id + 1,
            firstname: '',

        });
    };
  handleInputChange = (e) => {
        let input = e.target;
        let name = e.target.name;
        let value = input.value;

        this.setState({
            [name]: value
        })
    };
 render() {
        return ( 
        <div className = "App" >
            <Form handleFormSubmit = { this.handleFormSubmit }
            handleInputChange = { this.handleInputChange }
            newId = { this.state.id }
            newFirstname = { this.state.firstname }/> 
            <Table items = { this.state.items }/> 
        </div >
        );
    }
}
export default App;

Таблица. js

import React, { Component } from 'react';
import './App.css';
class Table extends React.Component {
    render() {
        const items = this.props.items;
        return (
            <div id = "Table" >
            <table class = "tdgreeting" border = "1" frame = "void" rules = "rows" >
            <tbody >
            <tr >
            <th > Id < /th> 
            <th > FirstName < /th>
            <th > Edit < /th>

            < /tr >
            {
                items.map(item => {
                    return (
                        <tr >    
                        <td > { item.id } < /td>
                        <td > { item.firstname} < /td>
                        <td > < button class = "btnStyle" onClick = { this.props.onUpdate } > Edit < /button></td >         
                        </tr>
                    );
                })
            } 
            </tbody>
            </table>
            </div>       
        );
    }
}
export default Table;

Форма. js

import React, { Component } from 'react';
import './App.css';
class Form extends React.Component {

    render() {
        return ( 
        <div class = "main" > 
        <h3 > Greetings < /h3>   
        <form id = "formInput" onSubmit = { this.props.handleFormSubmit } >
            <input id = "firstname"
            value = { this.props.newFirstname }
            type = "firstname"
            name = "firstname"
            placeholder = "Firstname"
            onChange = { this.props.handleInputChange }
            required / >
            <button type = "submit"
            value = "Submit" > Save < /button>
            <button type = "reset"
            value = "Reset" > Cancel < /button> 
            < /form > 
            < /div >
        );
    }
}

export default Form;

Answer 1

Мне удалось добиться того, что вы упомянули в вопросе. Весь код может быть подвергнут рефакторингу, если вы используете Hooks, поскольку это выходит за рамки этого вопроса, мы можем обновить наш компонент на основе классов.

Я добавил новый обработчик функции onUpdate который получает имя edited от компонента Table и обновляет ваше существующее состояние items с соответствием id, полученным от компонента Table.

Вот рабочая песочница .

//App.js
import React from "react";
import Table from "./Table";
import Form from "./Form";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      id: 1,
      firstname: "",
      items: [],
    };
  }

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

    let items = [...this.state.items];

    items.push({
      id: this.state.id,
      firstname: this.state.firstname,
    });

    this.setState({
      items,
      id: this.state.id + 1,
      firstname: "",
    });
  };

  handleInputChange = (e) => {
    let input = e.target;
    let name = e.target.name;
    let value = input.value;

    this.setState({
      [name]: value,
    });
  };

  onUpdate = (item) => {
    const updatedData = this.state.items.map((x) =>
      x.id === item.id ? { ...x, firstname: item.newFirstname } : x
    );
    this.setState({ items: updatedData });
  };

  render() {
    return (
      <div className="App">
        <Form
          handleFormSubmit={this.handleFormSubmit}
          handleInputChange={this.handleInputChange}
          newId={this.state.id}
          newFirstname={this.state.firstname}
        />
        <Table items={this.state.items} onUpdate={this.onUpdate} />
      </div>
    );
  }
}
export default App;

Добавлен отдельный form-inputs в ваш Table компонент, чтобы избежать его тесной связи с вашим App.js файлом. Конечно, вы могли бы многократно изменить его, используя hooks и при правильном использовании компонентов.

//Table.js
import React from "react";
import Form from "./Form";

class Table extends React.Component {
  state = {
    isEdit: false,
    newFirstname: "",
    id: "",
  };

  updateItem = (item) => {
    this.setState({ isEdit: true, id: item.id });
  };

  handleInputChange = (e) => {
    this.setState({ newFirstname: e.target.value });
  };

  handleFormSubmit = (e) => {
    e.preventDefault();
    this.props.onUpdate(this.state);
    this.setState({ isEdit: false });
  };

  render() {
    const items = this.props.items;

    return (
      <div id="Table">
        <table class="tdgreeting" border="1" frame="void" rules="rows">
          <tbody>
            <tr>
              <th> Id </th>
              <th> FirstName </th>
              <th> Edit </th>
            </tr>
            {items.map((item) => {
              return (
                <tr>
                  <td> {item.id} </td>
                  <td> {item.firstname} </td>
                  <td>
                    {" "}
                    <button
                      class="btnStyle"
                      onClick={() => this.updateItem(item)}
                    >
                      {" "}
                      Edit{" "}
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {this.state.isEdit ? (
          <Form
            handleFormSubmit={this.handleFormSubmit}
            handleInputChange={this.handleInputChange}
           />
        ) : null}
      </div>
    );
  }
}
export default Table;