Question

我有一个父级和一个子级组件。在那里创建一个包含数据的表。我在表格的每一行都有一个修改图标。现在，我需要单击该图标时-为该特定行创建了输入字段，并且可以修改此数据，然后如果按“确定”-使用“ axios.put”方法将该更改后的数据传递给数据库，如果按“取消”-请注意修改项目。我创建了isInEditMode变量。但是我不知道在子级或父级中在哪里创建输入字段？

孩子：

import React from 'react';
import './tableHasp.css';


class TableHasp extends React.Component {
  render(){
    return  ( 
      <tr>
         <td>{ this.props.hasps._id}</td>
         <td>{ this.props.hasps.serial }</td>
         <td>{ this.props.hasps.soft }</td>
         <td>{ this.props.hasps.numberOfKeys }</td>
         <td>{ this.props.hasps.company.name }</td>
         <td>{ this.props.hasps.company.city }</td>
         <td>{ this.props.hasps.company.phone }</td>
         <td>{ this.props.hasps.dateCreated }</td>
         <td><i onClick={() => this.props.modifyEvent(this.props.hasps)} className="far fa-edit btnEdit"></i></td>
         <td><i  onClick={() => this.props.delEvent(this.props.hasps._id)} className="far fa-trash-alt btnDelete" ></i></td>
      </tr>
      );
  }
}

export default TableHasp;

儿童的父数据：

<div className="container">
        <table className="table table-striped">
        <thead className="thead-dark">
          <tr>
            <th scope="col">id</th>
            <th scope="col">Serial Number</th>
            <th scope="col">Soft</th>
            <th scope="col">Number of Keys</th>
            <th scope="col">Company</th>
            <th scope="col">City</th>
            <th scope="col">Contacts</th>
            <th scope="col">Date Created</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
         <tbody>
            {this.state.hasps.map((hasp, i) => 
            <TableHasp 
                 delEvent={(hasp) => this.deleteCurrentHaspInfo(hasp)} 
                 modifyEvent={(id) => this.modifyCurrentHaspInfo(id)}  
                 key={i} 
                 hasps={hasp} 
                 />)}
          </tbody>
         </table>
       </div>

将修改项目数据的功能：

 modifyCurrentHaspInfo = (hasp) => { 
    this.setState({
      isInEditMode: !this.state.isInEditMode,
      editHasp: hasp
    })   
    console.log(hasp); 
     // if (prompt("Enter password:") === "123456") {
        axios.put("/hasp/change", 
            {
              _id: hasp._id,
              serial: "yyyyy-99000",  //test data
              soft: "test-put3"       //test data
            }            
         )
        .then((res) => {
          console.log(res.data);      
        })
        .catch((err) => {
          console.log(err);
        })
     // } else {
      //  alert("Wrong password!");
     // }         
   }

Answer 1

发送索引而不是对象

<td><i onClick={() => this.props.modifyEvent(i)} className="far fa-edit btnEdit"></i></td>

修改值，并将prop添加到项目中。

modifyCurrentHaspInfo = (index) => { 
  const hasps = [...this.state.hasps];
  hasps[index].isInEditMode = true;

  this.setState({hasps});

  console.log(hasp); 
  // if (prompt("Enter password:") === "123456") {

  axios.put("/hasp/change", 
        {
          _id: hasp._id,
          serial: "yyyyy-99000",  //test data
          soft: "test-put3"       //test data
        }            
     )
    .then((res) => {
      console.log(res.data);      
    })
    .catch((err) => {
      console.log(err);
    })
   // } else {
   //  alert("Wrong password!");
  // }         
}

使用条件创建一个新的。

{this.props.hasps.isInEditMode && <td>ACTION!!!</td>}

重要

请勿使用 INDEX作为键

{this.state.hasps.map((hasp, i) => 
        <TableHasp 
             delEvent={(hasp) => this.deleteCurrentHaspInfo(hasp)} 
             modifyEvent={(hasps) => this.modifyCurrentHaspInfo(hasps)}  
             key={i} 
             hasps={hasp} 
             />
)}

使用对象中的唯一值。

为什么不应该使用索引作为键。

密钥是React用来识别DOM元素的唯一东西。如果将项目推送到列表或在中间删除某些内容，会发生什么？如果密钥与之前相同，则React假定DOM元素表示与以前相同的组件。但这不再是真的。

来源：https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

在React中，如何创建输入字段并连续更改当前项目？

1 个答案: