Question

我是ReactJS的新手，它使用少量组件（如UserForm，UserGrid和App）构建了一个简单的应用程序。 UserForm显示简单的文本框和按钮，如下所示。

，当用户在文本框中输入一些文本并单击“保存”按钮时，它将按照屏幕截图在UserGrid组件中显示数据。

但是我不知道编辑如何工作？就像当我点击编辑时，它将从网格中获取信息并填充文本框，以便我可以更新数据，有人可以帮我吗？我怎样才能做到这一点？

下面是我的代码

UserForm.js

import React,{createRef} from 'react';

const UserForm = (props) =>{
const username = createRef();
const saveUser = () =>{
    debugger
    if(username.current.value !== ''){
        props.handleSubmit(username.current.value);
        username.current.value='';
        username.current.focus();
    }
}
return(
    <div className="row">
        <div className="col-md-6">
            <div className="form-group">
                <input type="text" className="form-control" placeholder="Username" ref={username} />
            </div>                
        </div>
        <div className="col-md-12">
            <button className="btn btn-primary" onClick={saveUser}>Save</button>
        </div>            
    </div>
)
}
export default UserForm;

UserGrid.js

import React from 'react';

const UserGrid = (props) =>{
debugger
return(
    <div className="row">
        <div className="col-md-12">
            <table className="table">
                <tr>
                    <th>
                        Username
                    </th>
                    <th>

                    </th>
                </tr>
                {
                    props.list.map(item => 
                        <tr>
                            <td>
                                {item}
                            </td>
                            <td>
                                <button>Edit</button>
                                <button>Delete</button>
                            </td>
                        </tr>
                    )
                }                    
            </table>
        </div>            
    </div>
)
}
export default UserGrid;

App.js

import React,{useState} from 'react';
import UserForm from './UserForm';
import UserGrid from './UserGrid';

function App() {
    const [list, setList] = useState([]);
    const handleSubmit = (username) =>{
    setList([...list,username]);
}
return (
    <div className="App">
        <UserForm handleSubmit={handleSubmit}></UserForm>
        <UserGrid list={list}></UserGrid>
    </div>
);
}

export default App;

Answer 1

这是我使用您的代码时的有效示例。 App.js没什么特别的。您可以看一下逻辑。

App.js

import React, { useState } from "react";
import UserForm from "./UserForm";
import UserGrid from "./UserGrid";

function App() {
  const [list, setList] = useState([]);
  const handleSubmit = username => {
    setList([...list, username]);
  };

  const editList = item => {
    setList(
      list.map(l => ({
        ...l,
        username: l.id === item.id && item.newValue ? item.newValue : l.username
      }))
    );
  };

  const deleteList = id => {
    setList(list.filter(l => l.id !== id));
  };

  return (
    <div className="App">
      <UserForm handleSubmit={handleSubmit}></UserForm>
      <UserGrid
        list={list}
        editList={editList}
        deleteList={deleteList}
      ></UserGrid>
    </div>
  );
}

export default App;

这是UserForm组件。我认为您会遇到问题，如果您没有ID之类的东西，而如果您拥有相同名称的列表，则您的删除和编辑功能将无法正常工作。

UseForm.js

import React, { createRef } from "react";

const UserForm = ({ handleSubmit }) => {
  const username = createRef();
  const saveUser = () => {
    if (username.current.value !== "") {
      const randomId = () => "_" + Math.random().toString(36).substr(2, 9);
      handleSubmit({ username: username.current.value, id: randomId() });
      username.current.value = "";
      username.current.focus();
    }
  };
  return (
    <div className="row">
      <div className="col-md-6">
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Username"
            ref={username}
          />
        </div>
      </div>
      <div className="col-md-12">
        <button className="btn btn-primary" onClick={saveUser}>
          Save
        </button>
      </div>
    </div>
  );
};
export default UserForm;

这是UserGrid组件。希望您能理解代码。如有疑问，请继续。

UseGrid.js

import React, { useState } from "react";

const UserGrid = ({ list, editList, deleteList }) => {
  const [isEditable, setIsEditable] = useState(false);
  const [value, setValue] = useState("");

  return (
    <div className="row">
      <div className="col-md-12">
        <table className="table">
          <tr>
            <th>Username</th>
            <th></th>
          </tr>
          {list.map(item => (
            <tr>
              <td>{item.username}</td>
              {isEditable ? (
                <>
                  <td>
                    <input
                      type="text"
                      className="form-control"
                      placeholder="Username"
                      onChange={e => setValue(e.target.value)}
                    />
                  </td>
                  <button onClick={() => setIsEditable(false)}>CANCEL</button>
                </>
              ) : null}
              <td>
                <button
                  onClick={() => {
                    editList({
                      id: item.id,
                      username: item.username,
                      newValue: value
                    });
                    setIsEditable(true);
                  }}
                >
                  Edit
                </button>
                <button onClick={() => deleteList(item.id)}>Delete</button>
              </td>
            </tr>
          ))}
        </table>
      </div>
    </div>
  );
};
export default UserGrid;

Answer 2

您必须将编辑状态移至App组件，而不是在子组件中使用ref。就像App.js中具有handleSubmit一样，具有handleEdit函数并将该函数传递给UserGrid。

.env

UserForm.js

DB_ADAPTER=postgres
DB_HOST=kong-database
DB_USER=kong
DB_PASSWORD=kong  
DB_SSL=false
DB_ADAPTER=postgresql
DB_PORT=5432
POSTGRES_VERSION=10.6
SSL_KEY_PATH=/etc/certs/key.pem
SSL_CERT_PATH=/etc/certs/certificate.pem
CLIENT_SECRET=km1GUr4RkcQD7DewhJPNXrCuZwcKmqjb
DB_DATABASE=kong
NODE_ENV=production
PORT=1337
OXD_SERVER_URL= 
OP_SERVER_URL=
OXD_ID=
CLIENT_ID= 
CLIENT_SECRET= 
OXD_SERVER_VERSION=4.1
GG_HOST=demoexample.gluu.org
GG_UI_REDIRECT_URL_HOST=demoexample.gluu.org 
EXPLICIT_HOST=127.0.0.1
GG_VERSION=4.1
KONGA_HOOK_TIMEOUT=180000

要支持编辑：

.appbody{
    height: calc(100vh - 65px);
    margin-top: 65px; /* Clear the space for the app bar above */
}

React两个组件之间的js通信

2 个答案: