如何使用子组件 onClick 函数重新渲染父组件答案

【问题标题】：How can I re-render parent component with a child component onClick function如何使用子组件 onClick 函数重新渲染父组件
【发布时间】：2021-11-28 08:46:59
【问题描述】：

我有一个名为“RiskMatrix.js”的父组件，如下所示：

export default function RiskMatrix({disable}) {

    const dispatch = useDispatch();
    const [risk_matrix, setRiskMatrix] = React.useState(useSelector((state) => state.riskMatrix.risk_matrix));

    if (disable == true) {
        return (
            
            <TableContainer component={Paper} style={{height: "40vh", width: "90vh"}}>
                {console.log(risk_matrix)}
                <Table size="small" sx={{ minWidth: 200 }}>
                    <TableHead>
                        <TableRow>
                            <TableCell align="center" width="90"></TableCell>
                            {consequences_description.map((description) => (
                                <TableCell align="center" width="90">{description}</TableCell>
                                )
                            )}
                        </TableRow>
                    </TableHead>
                    <TableBody>    
    
                        {risk_matrix.map((row, row_index) => (
                        <TableRow
                            key={row_index}
                            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                        >
                            <TableCell component="th" scope="row">
                                {likelyhood_description[row_index]}
                            </TableCell>
                            {row.map( (column, column_index) => (
                                <TableCell align="center">
                                    <ToggleButton 
                                        risk={column}
                                        row_index={row_index}
                                        column_index={column_index}
                                        />
                                </TableCell>
                            ))}
                        </TableRow>
                        ))}
    
                    </TableBody>
                </Table>
            </TableContainer>
        );
    } else {
        return null
    }
}

我希望这个组件在调用子（“ToggleButton”）组件的onClick函数时重新渲染，子组件如下所示：

export default function ToggleButton({risk, row_index, column_index}) {

    const handleColor = () => {
        switch (risk){
            case "L":
              return "low"
            case "M":
              return "moderate"
            case "H":
              return "high"
            case "E":
              return "extreme"
            default:
              break;
        }
    };

    const dispatch = useDispatch();
    const { updateMatrix} = bindActionCreators(actions, dispatch)

    const handleOnClick = () => {
      switch (risk){
        case "L":
          updateMatrix(row_index, column_index, "M")
          break;
        case "M":
          updateMatrix(row_index, column_index, "H")
          break;
        case "H":
          updateMatrix(row_index, column_index, "E")
          break;
        case "E":
          updateMatrix(row_index, column_index, "L")
          break;
        default:
          break;
      }
    };

    return (

        <ThemeProvider theme={filtersTheme}>    
          <Button variant="contained" color={handleColor()} onClick={()=> handleOnClick()} >{risk}</Button>
        </ThemeProvider>
    );
}

子组件也使用 onClick 函数更新 react-redux 状态，理想情况下，我希望父组件在此状态更改后重新渲染。

【问题讨论】：

一个 react 组件在其 props 或 state 改变时重新渲染。因此，向它传递一个改变该按钮的 onClick 的道具或包含一个改变其 onClick 值的状态变量，然后您的父组件将重新渲染

标签： javascript reactjs jsx

【解决方案1】：

当状态更新时，React 组件会重新渲染。因此，一种解决方案是创建一个状态并将 setter 传递给子组件，并在需要重新渲染时使用新值调用它。

您还可以在父元素中使用事件冒泡来捕获onClick事件并更新状态，而无需将道具传递给子元素。 read more about event bubbling here

更好的实现是使用 react 的上下文 API，这样每个子节点都可以适当地访问矩阵数据，并在数据自动更改时重新渲染。

【讨论】：