将变量从一个反应性组件发送到另一个

Question

我有个问题。在我的Table.jsx中，我试图将selectedRows Id变量发送到编辑.jsx，以便在打开编辑模式时，输入字段已经存在。

Table.jsx

import React, { createContext, useEffect, useState } from 'react'
import  { useMemo } from 'react'
import table from '../assets/json/mock.json'
import { useTable,useRowSelect, useSortBy, usePagination} from 'react-table';

import {useSticky} from 'react-table-sticky'
function handleChange(e) {
    let len=e.value.length
    console.log(len)
    }
    
const Table =({columns,data})=> {
    
    const IndeterminateCheckbox = React.forwardRef(
        ({ indeterminate, ...rest }, ref) => {
            const defaultRef = React.useRef()
            const resolvedRef = ref || defaultRef
            React.useEffect(() => {
            resolvedRef.current.indeterminate = indeterminate
            }, [resolvedRef, indeterminate])
            return (
            <>
                <input name="checkbox" type="checkbox" ref={resolvedRef} {...rest} />
            </>
            )
        }
        )
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        page,
        nextPage,
        previousPage,
        canNextPage,
        canPreviousPage,
        pageOptions,
        state,
        gotoPage,
        pageCount,
        setPageSize,
        selectedFlatRows,
        prepareRow,
        }=useTable({
            columns,
            data,
            initialState : {pageIndex : 0}
        },
        useSortBy,usePagination,useRowSelect,
        hooks => {
            hooks.visibleColumns.push(columns => [
              // Let's make a column for selection
                {
                    id: 'selection',
                // The header can use the table's getToggleAllRowsSelectedProps method
                // to render a checkbox
                    Header: ({ getToggleAllRowsSelectedProps }) => (
                    <div>
                        <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
                    </div>
                ),
                // The cell can use the individual row's getToggleRowSelectedProps method
                // to the render a checkbox
                    Cell: ({ row }) => (
                    <div>
                        <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
                    </div>
                ),
                },
                ...columns,
            ])
            }
        )

    const [selectedRows, setSelectedRows] = useState([]);
    const {pageIndex,pageSize,selectedRowIds}=state
    useEffect(() => {
        setSelectedRows(selectedFlatRows.map(row => row.original));
        }, [setSelectedRows, selectedFlatRows]);
    const noofselectedrows=createContext();
    
    return (
        <>
        <table className="database-table sticky" {...getTableProps()}>
            <thead className='header'>
                {
                    headerGroups.map((headerGroup)=>
                    (
                    
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {
                                headerGroup.headers.map((column) =>
                                    (
                                        <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                                            {column.render(`Header`)}
                                            <span>
                                                {
                                                    column.isSorted ? (column.isSortedDesc ? '▼':'▲'):''
                                                }
                                            </span>
                                            </th>
                                    ))
                                    }
                        </tr>
                    ))
                }
            </thead>
            <tbody {...getTableBodyProps()}>
                {
                    page.map((row)=>
                        {
                            prepareRow(row)
                            return(
                                <tr {...row.getRowProps()}>
                                    {row.cells.map((cell)=>{
                                        return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                                    })}
                                </tr>
                            )
                        })
                }
            </tbody>
        </table>
        
        
            <div className='header-bottom'>
            {       
                    
                    headerGroups.map((headerGroup)=>
                    (
                    
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {
                                headerGroup.headers.map((column) =>
                                    (
                                        <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                                            {column.render(`Header`)}
                                            <span>
                                                {
                                                    column.isSorted ? (column.isSortedDesc ? '▼':'▲'):''
                                                }
                                            </span>
                                            </th>
                                    ))
                                    }
                        </tr>
                    ))
                }
            </div>
            <div className='table-footer'>
                <div className='page-no'id='modal-item'>
                        Viewing :     {pageIndex+1} of {pageOptions.length}     
                </div>
                <span className ='copyright'> 
                    © 2022 Highradius.All Rights Reserved
                </span>
                <span className='rowno' id='modal-item'>
                    Rows per Page :
                    <select value={pageSize} onChange={e=>setPageSize(Number(e.target.value))}>
                        {
                            [10,20,30,40,50].map(pageSize=>(
                            <option key={pageSize} value={pageSize}>
                            {pageSize  }
                            </option>
                            ))
                        }
                    </select>
                </span>
                <button   button onClick={()=>previousPage()} disabled={!canPreviousPage} id='pag-btn'>{' < '}</button>
                <button   button onClick={()=>nextPage()} disabled={!canNextPage} id='pag-btn' >{' > '}</button>
            </div>
        
        </> 
    )
}

export default Table

Edit.jsx

import React from 'react'

const Edit = props=> {
    if(!props.show){
        return null
    }
    return (
    <div className='modal overlay' id= 'edit-modal '>
        <div className="modal-content" id= 'edit-modal '>
            <div className="modal-header" id= 'edit-modal '>
                <h4 className="modal-title" id= 'edit-modal-title '>Edit</h4>
            </div>
            < div className="modal-body editmodal" id= 'edit-modal '>
                <input type="text" placeholder='Invoice Currency' id='invoice_currency' className="modal-input" />
                <input type="text" placeholder='Customer Payment Terms' id='cust_payment_terms' className="modal-input" />
            </div>
            <div className="modal-footer" id= 'edit-modal '>
                <button className="editbtn " id= 'edit-modal '> EDIT </button>
                <button className="cancel" id= 'edit-modal ' onClick={props.onClose}>CANCEL</button>
            </div>
        </div>
    </div>
    )
}

export default Edit

App.js

import React,{ useState } from 'react'
import {useMemo}  from 'react'
import Logo from './components/Logo.jsx'
import './App.css'
import PredictBtn from './components/PredictBtn.jsx'
import Analytics from './components/AnalyticsView.jsx'
import Advsrchmodal from './components/Advsrchmodal.jsx'
import Search from './components/Search.jsx'
import Add from './components/Addmodal.jsx'
import Edit from './components/Edit.jsx'
import Delete from './components/Delete.jsx'
import Table from './components/Table.jsx'
import table from './assets/json/mock.json'
import {Columns} from './components/column'
export default function App(){
  const [advmodal,setadvmodal]=useState(false)
  const [addmodal,setaddmodal]=useState(false)
  const [editmodal,seteditmodal]=useState(false)
  const [delmodal,setdelmodal]=useState(false)
  const [search,setSearch]=useState('')
  const searchItems=(searchValue)=>{
    setSearch(searchValue)
  }
  const columns = useMemo(()=> Columns ,[])
  const data = useMemo(()=> table, [])
    return(
    <div>
      <body>
      <Logo />
      <div className='header-btns'>
        <PredictBtn/><Analytics/>
        <button onClick={()=> setadvmodal(true)} className="leftbtns adv-srch-btn"id="adv-srch-modal">ADVANCED SEARCH</button>
        <Advsrchmodal onClose={()=> setadvmodal(false)} show={advmodal}/>
        
        
        <Search handleSearch={searchItems}/>
      
        <button onClick={()=> setaddmodal(true)} className="rightbtns add-btn" id ="add-modal">ADD</button>
        <Add onClose={()=> setaddmodal(false)} show={addmodal}/>
      
      
        <button onClick={()=> seteditmodal(true)} className="rightbtns edit-btn">EDIT</button>
        <Edit onClose={()=> seteditmodal(false)} show={editmodal}/>

        <button onClick={()=> setdelmodal(true)} className="rightbtns del-btn">DELETE</button>
        <Delete onClose={()=>setdelmodal(false)} show={delmodal}/>
      </div>
      <div className="Table">
        <Table columns={Columns} data={data}/>
      </div>
      </body>
    </div>
  )
}

我希望将我从Table.jsx中选择的行的数据发送到Edit.jsx，以便在编辑它们之前能够看到所选行的值(发票、货币、付款条款)。

Answer 1

您可以将道具传递给组件。

table.jsx

<Edit show={true}>

然后在编辑竞争中获得道具值。

edit.jsxt

const Edit = (props) => {
  if(!props.show){
    return null
  }
}

或使用物体下降

const Edit = ({ show }) => {}