React js 兩個組件之間的通信

Question

我是 ReactJS 的新手，使用 UserForm、UserGrid 和 App 等幾個組件構建了一個簡單的應用程序。 UserForm 顯示簡單的文本框和按鈕，如下所示。

當用戶在文本框中輸入一些文本並點擊保存按鈕時，它將根據屏幕截圖在 UserGrid 組件中顯示數據。

但我無法弄清楚編輯將如何工作？ 就像當我點擊編輯時，它會從網格中獲取信息並填充文本框，這樣我就可以更新數據，有人可以幫我嗎？ 我怎樣才能做到這一點？

下面是我的代碼

用戶窗體.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;

用戶網格.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;

應用程序.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 沒有什么特別之處。 你可以看看一個邏輯。

應用程序.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;

這是用戶窗體組件。 我認為你會遇到問題，如果你沒有像 ID 這樣的東西，因為如果你有同名的列表，你的刪除和編輯功能就會出錯。

使用Form.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 組件。 我希望你能理解代碼。 如果您有疑問，請繼續。

使用Grid.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 一樣。

function App() {
    const [list, setList] = useState([]);
    const [name, setName] = useState('');
    const [editIndex, setEditIndex] = useState(null);
    const handleSubmit = () => {
      if(editIndex) {
        setList([...list.slice(0, index), name, ...list.slice(index+1)])
        setEditIndex(null)
      } else {
        setList([...list, name]);
      }
      setName('')
    }

return (
    <div className="App">
        <UserForm name={name} setName={setName} handleSubmit={handleSubmit}></UserForm>
        <UserGrid setEditIndex={setEditIndex} list={list}></UserGrid>
    </div>
);
}

用戶窗體.js

import React,{createRef} from 'react';

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

支持編輯：

{
                props.list.map((item, index) => 
                    <tr>
                        <td>
                            {item}
                        </td>
                        <td>
                            <button onClick={setEditIndex(index)}>Edit</button>
                            <button>Delete</button>
                        </td>
                    </tr>
                )
            }