reactjs如何访问另一个组件中函数的属性答案

【问题标题】：How to access attribute of a function in another component in reactjsreactjs如何访问另一个组件中函数的属性
【发布时间】：2021-05-21 03:09:56
【问题描述】：

我想从组件内的函数中获取属性。该函数称为 checkbox.js：

export default function Checkboxes() {
  const [checked, setChecked] = React.useState(false);

  const handleChange = (event) => {
    setChecked(event.target.checked);
  };

  return (
    <div>
      <Checkbox
        checked={checked}
        onChange={handleChange}
        color="primary"
        inputProps={{ 'aria-label': 'primary checkbox' }}
      />
      </div>
  );
}

组件复选框在一个表格行中多次。 props.characterData 是一个具有各种属性的数组。

const TableBody = props => {
      const rows = props.characterData.map((row, index) => {
              return (
               <tr key={index}>
                 <td>
                   <Checkbox />
                 </td>
                 <td>{row.task}</td>
                 <td>{row.desc}</td>
               </tr>
                      )
            })
      return <tbody>{rows}</tbody>
}

我想要做的是每次更改时将“已检查”布尔值保存到 row.checked 属性中，但我尝试或搜索的任何内容都没有工作。

row.checked 来自一个字符数组，其中每个字符都以如下形式初始化：

{ task: '', desc: '', checked: false}

在TableBody中，为数组中的每个元素映射。

任何帮助将不胜感激。

【问题讨论】：

Checkbox 被检查的值/状态是内部维护的，如果你在外部需要它则需要提供回调函数，或者将Checkbox 组件转换为受控输入（即状态是外部的并控制它）。您能否更新您的问题以包含 row.priority 逻辑？
这能回答你的问题吗？ React Hook : Send data from child to parent component
我添加了 row.priority 逻辑，但将其重命名为 row.checked。 react 钩子很有帮助，但由于我的复选框是一个函数，而我的 TableBody 是一个组件而不是类渲染，所以我无法使其工作。

标签： javascript reactjs

【解决方案1】：

import React, { useState, useEffect } from 'react'

const Checkboxes =({checked, cbOnChange})=> {
    const handleChange = (event) => {
        cbOnChange(event.target.checked);
    };
  
    return (
      <div>
        <Checkbox
          checked={checked}
          onChange={handleChange}
          color="primary"
          inputProps={{ 'aria-label': 'primary checkbox' }}
        />
        </div>
    );
  }

const TableBody = props => {
    const [checkboxValue, setCheckboxValue] = useState({})
    useEffect(() => {
        setCheckboxValue({})
    }, [JSON.stringify(props.characterData)])

    const handleChange =(index, checked)=>{
        setCheckboxValue((state)=>({
            ...state,
            [index]: checked
        }))
    }
    const rows = props.characterData.map((row, index) => {
            return (
             <tr key={index}>
               <td>
                 <Checkboxes cbOnChange={(checked)=> handleChange(index, checked)} checked={checkboxValue[index] || false}/>
               </td>
               <td>{row.task}</td>
               <td>{row.desc}</td>
             </tr>
                    )
          })
    return <tbody>{rows}</tbody>
}
export default TableBody

【讨论】：

【解决方案2】：

你应该这样写：

export default function App() {

  const [characterData , setCharacterData] = React.useState([{
id: 1,
priority : true,
task: "task1",
desc: "desc1"
  },
  {
    id: 2,
   priority : false,
   task: "task2",
 desc: "desc2"
  }])

  const handleChangePriority = (id , value) => {
    let cloneCharacterData = [...characterData]
    const selectData = characterData.filter(itm => itm.id === id)[0];
   const index = cloneCharacterData.findIndex(itm => itm.id === id)
   selectData.priority = value;
   cloneCharacterData[index] = selectData;
   setCharacterData(cloneCharacterData)
 }

  return (
     <div >
<TableBody characterData={characterData} handleChangeProps={handleChangePriority} />
   </div>
 );
}

表格主体：

 const TableBody = props => {
const rows = props.characterData.map((row, index) => {
        return (
         <tr key={index}>
           <td>
             <Checkbox  id={row.id} priority={row.priority} handleChangeProps={props.handleChangeProps} />
           </td>
           <td>{row.task}</td>
           <td>{row.desc}</td>
         </tr>
                )
      })
return <tbody>{rows}</tbody>
}

还有复选框：

    export default function Checkboxes({priority , handleChangeProps , id}) {
//   const [checked, setChecked] = React.useState(false);

  const handleChange = event => {
    // setChecked(event.target.checked);
    handleChangeProps(id , event.target.checked)
  };

 return (
   <div>
     <Checkbox
       checked={priority}
      onChange={handleChange}
       color="primary"
       inputProps={{ "aria-label": "primary checkbox" }}
     />
   </div>
 );
  }

【讨论】：