Javascript 如何基于来自2个不同组件的用户输入更新表数据

我是英语初学者。我正在从事一个项目，该项目可以从API中呈现表格数据，用户应该能够根据复选框形式的选择过滤表格。我有两个不同组件中的表单（复选框）

我试图找出正确的方法来处理来自任一组件的用户输入，并显示在不同组件中呈现的过滤数据

我有一个组件，在从API获取数据后呈现“datatable”。

表组件：

import React, { useState, useEffect, useMemo } from "react"
import DataService from "./service"
import { MDBDataTable } from "mdbreact"
import { Row, Col, Card, CardBody, CardTitle, CardSubtitle } from "reactstrap"

const SampleList = props => {
  const [samples, setSamples] = useState([])

  useEffect(() => {
    retrieveSamples()
  }, [])

  const retrieveSamples = () => {
    DataService.sampleList()
      .then(response => {
        setSamples(response.data)
      })
      .catch(e => {
        console.log(e)
      })
  }
  
  const data = {
    columns: [
      {
        label: "Sample",
        field: "sample",
      },
      {
        label: "Group",
        field: "group",
      },
    ],
    rows: samples,
  }

  return (
    <React.Fragment>
      <Row>
        <Col className="col-12 pt-4">
          <Card>
            <CardBody>
              <CardTitle>Samples</CardTitle>
              <CardSubtitle className="mb-3">
                Please apply any filter to view the samples
              </CardSubtitle>

              <MDBDataTable responsive striped bordered data={data} />
            </CardBody>
          </Card>
        </Col>
      </Row>
    </React.Fragment>
  )
}

export default SampleList

import React，{useState，useffect，usemo}来自“React”
从“/service”导入数据服务
从“mdbreact”导入{MDBDataTable}
从“reactstrap”导入{Row，Col，Card，CardBody，CardTitle，CardSubtitle}
const SampleList=props=>{
常量[samples，setSamples]=useState（[]）
useffect（（）=>{
检索样本（）
}, [])
常量检索示例=（）=>{
DataService.sampleList（）
。然后（响应=>{
设置样本（响应数据）
})
.catch（e=>{
控制台日志（e）
})
}
常数数据={
栏目：[
{
标签：“样本”，
字段：“样本”，
},
{
标签：“集团”，
字段：“组”，
},
],
行：样本，
}
返回(
样品
请应用任何筛选器以查看样本
)
}
导出默认样本列表

我有两个不同的组件来处理用户输入。

带有复选框的组件1：

import React, { useState } from "react"

const tissue = [
  "Flower",
  "Stem",
  "Shoot",
  "Root",
]
function TissueOptions(props) {
  const [formData, updateFormData] = useState([])

  const handleChange = event => {
    let all_checked = []
    if (event.target.checked) {
      console.log("Checked:" + event.target.value)
      updateFormData({
        ...formData,
        [event.target.id]: event.target.value.trim(),
      })
    } else {
      console.log("unchecked: " + event.target.value.trim())
      let newSelection = {}

      Object.entries(formData).forEach(([key, value]) => {
        if (value !== event.target.value.trim()) {
          newSelection[key] = value
        }
      })
      updateFormData(newSelection)
    }
  }

  const handleSubmit = event => {
    event.preventDefault()
    //  how to filter data from the table component
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <ul>
          <p>Tissues</p>
          {tissue.map((name, index) => (
            <div className="form-check mb-3">
              <input
                className="form-check-input"
                type="checkbox"
                value={name.toLowerCase()}
                id={index + name}
                onChange={handleChange}
              />
              <label className="form-check-label" htmlFor={index + name}>
                {name}
              </label>
            </div>
          ))}
        </ul>

        
        <button>Filter</button>
      </form>
    </>
  )
}

export default TissueOptions

import React，{useState}来自“React”
恒定组织=[
“花”，
“干”，
“开枪”，
“根”，
]
功能选项（道具）{
常量[formData，updateFormData]=useState（[]）
const handleChange=事件=>{
让所有_选中=[]
if（event.target.checked）{
日志（“选中：+event.target.value”）
updateFormData({
…表格数据，
[event.target.id]：event.target.value.trim（），
})
}否则{
log（“未选中：+event.target.value.trim（））
让newSelection={}
Object.entries（formData）.forEach（（[key，value]）=>{
if（value！==event.target.value.trim（））{
newSelection[键]=值
}
})
updateFormData（新闻选择）
}
}
const handleSubmit=事件=>{
event.preventDefault（）
//如何从表组件中筛选数据
}
返回(

纸巾

{tissure.map（（名称、索引）=>(
{name}
))}

滤器
)
}
导出默认选项

具有其他筛选器选项的组件2：（这是一个独立的不相关组件的子组件）

import React，{useState}来自“React”
const基因型=[“野生型”、“突变型”、“转基因”、“杂种”、“其他”、“ND”]
常量处理=[“已处理”、“未处理”、“未处理”]
功能侧气压选项（道具）{
常量[formData，updateFormData]=useState（[]）
const handleChange=事件=>{
让所有_选中=[]
if（event.target.checked）{
日志（“选中：+event.target.value”）
updateFormData({
…表格数据，
[event.target.id]：event.target.value.trim（），
})
}否则{
log（“未选中：+event.target.value.trim（））
让newSelection={}
Object.entries（formData）.forEach（（[key，value]）=>{
if（value！==event.target.value.trim（））{
newSelection[键]=值
}
})
updateFormData（新闻选择）
}
}
const handleSubmit=事件=>{
event.preventDefault（）
//如何结合“过滤组件1”从表组件中过滤数据
}
返回(

基因型

{genetic.map（（名称、索引）=>(
{name}
))}


治疗

{treatment.map（（名称、索引）=>(
{name}
))}

滤器
)
}
导出默认SidebarOptions

如果有人能帮助我找到一种有效的方法，通过使用位于不同不相关组件中的过滤器来过滤和显示“表组件”上的数据，那就太好了

---

提前谢谢。

我可以想出三种方法来解决这个问题

将数据从

SampleList

提升到更高的组件，其中也存在

SidebarOptions

和

TissueOptions

。看起来像这样

const[sample，setSample]=useState（[]
//处理数据的加载
useffect（（）=>{}，[]））
//过滤函数
常量handleFilter=（*预期参数*）=>{
//处理过滤器更改的代码
设置示例（过滤器列表）
}
返回(
)

如果您认为这些数据将用于更多的其他组件，那么您可以研究实现或

Redux saga

。将需要更多的学习曲线和教程来观看，但它应该会有所帮助

您还可以从react中检查

上下文API

（）来处理这些

---

不会添加最后两个示例，因为您应该研究如何实现这些示例。

谢谢。我能够按照建议在更高的组件中获取数据。当我在“SidebarOptions”或“TissueOptions”组件中单击提交时，我能够运行“handleFilter”功能。然而，当我从“SidebarOptions”提交时，我还想收集“TissueOptions”c中的选定项目

import React, { useState } from "react"

const genotype = ["Wild type", "Mutant", "Transgenic", "Hybrid", "Other", "ND"]
const treatment = ["Treated", "Untreated", "ND"]

function SidebarOptions(props) {
  const [formData, updateFormData] = useState([])

  const handleChange = event => {
    let all_checked = []
    if (event.target.checked) {
      console.log("Checked:" + event.target.value)
      updateFormData({
        ...formData,
        [event.target.id]: event.target.value.trim(),
      })
    } else {
      console.log("unchecked: " + event.target.value.trim())
      let newSelection = {}
      Object.entries(formData).forEach(([key, value]) => {
        if (value !== event.target.value.trim()) {
          newSelection[key] = value
        }
      })
      updateFormData(newSelection)
    }
  }

  const handleSubmit = event => {
    event.preventDefault()
    //  how to filter data from the table component in combination with "filter component 1"
  }

  return (
    <>
      <form onSubmit={handleSubmit}>


        <ul>
          <p>Genotype</p>
          {genotype.map((name, index) => (
            <div className="form-check mb-3">
              <input
                className="form-check-input"
                type="checkbox"
                value={name.toLowerCase()}
                id={index + name}
                onChange={handleChange}
              />
              <label className="form-check-label" htmlFor={index + name}>
                {name}
              </label>
            </div>
          ))}
        </ul>

        <ul>
          <p>Treatment</p>
          {treatment.map((name, index) => (
            <div className="form-check mb-3">
              <input
                className="form-check-input"
                type="checkbox"
                value={name.toLowerCase()}
                id={index + name}
                onChange={handleChange}
              />
              <label className="form-check-label" htmlFor={index + name}>
                {name}
              </label>
            </div>
          ))}
        </ul>
        <button>Filter</button>
      </form>
    </>
  )
}

export default SidebarOptions

const [sample, setSample] = useState([])

// Handle loading of data 
useEffect(()=>{},[])

// Filter function
const handleFilter = (*expected params*) => {
  // code to handle filter changes

  setSample(filteredList)
}

return (
  <SampleTableWithFilter>
    <SidebarOptions onSubmit={handleFilter}/>
    <SampleList listData={sample} />
    <TissueOptions onSubmit={handleFilter}/>
  </SampleTableWithFilter>
)