在编辑按钮上点击显示输入文本字段中的行数据,并在React js中更新同一行的新值。

我是一个新的react js,我正在设计一个表单,用户输入名字,然后点击添加按钮,数据就会显示在表格中。

App.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;

解决方案:

我能够实现你在问题中提到的内容。整个代码可以重构很多,如果你使用的是 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;

给TA打赏
共{{data.count}}人
人已打赏
未分类

Python从线程中更新Matplotlib

2022-9-8 19:04:36

未分类

找到一个模式,并在它前面添加一个新行来替换该模式。

2022-9-8 19:04:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索