如何在单击时更改按钮而无需在 React 中刷新页面答案

【问题标题】：How to make button change on click without having to refresh page in React如何在单击时更改按钮而无需在 React 中刷新页面
【发布时间】：2022-12-17 23:51:05
【问题描述】：

我有一对“是”“否”按钮，除非我刷新页面，否则这些按钮在单击时不会改变颜色。我的创可贴解决方案是将 refresh() 添加到 handleClick，这会在每次单击按钮时强制刷新整个页面。虽然这确实改变了按钮的颜色，但我更希望页面不必在每次单击按钮后刷新并加载到顶部，并且每个按钮在单击时无缝地改变颜色。

我尝试使用 this answer 中的 e.preventDefault() 来阻止整页刷新，但我不确定在我的情况下在哪里或如何使用它，因为我没有将事件传递给处理程序。

<React.Fragment>
  <Button
    style={{ margin: '0px 5px' }}
    variant="contained"
    onClick={() =>
      handleClick(row.insight_id, row.device_id, 1)
    }
    color={
      row.userConfirmed == null
        ? 'default'
        : row.userConfirmed === 1
        ? 'primary'
        : 'default'
    }
  >
     Yes
  </Button>
   <Button
    style={{ margin: '0px 5px' }}
    variant="contained"
    onClick={() =>
      handleClick(row.insight_id, row.device_id, 0)
    }
    color={
      row.userConfirmed == null
        ? 'default'
        : row.userConfirmed === 1
        ? 'default'
        : 'primary'
    }
  >
    No
  </Button>
</React.Fragment>

 const handleClick = (insightId, deviceId, value) => {
    dispatch(updateUserConfirm(insightId, deviceId, value));
    refresh();
  };

编辑：添加减速器以及row来自哪里

const userInsightsReducer = (state = initialState, action) => {
  switch (action.type) {
.
.
. 
case UPDATE_USER_CONFIRM_BEGIN:
      return {

        ...state,
        result: 'BEGINNING',
      };
    case UPDATE_USER_CONFIRM_SUCCESS:
      const userInsightsDataNew = state.userInsightsData
      const insightIndex = state.userInsightsData.findIndex(insight => insight.device_id === action.payload.deviceId && insight.insight_id === action.payload.insightId )
      const updatedInsight = {...state.userInsightsData[insightIndex], userConfirmed:action.payload.value}
      userInsightsDataNew[insightIndex] = updatedInsight
      return {
        ...state,
        userInsightsData : userInsightsDataNew,
        result: "SUCCESS",
      };
    case UPDATE_USER_CONFIRM_FAILURE:
      return {
        ...state,
        result: 'FAILURE',

        let row = userInsights.userInsightsData[index];

【问题讨论】：

我们需要查看连接到dispatch(updateUserConfirm(insightId, deviceId, value)); 的reducer，我们需要查看row 来自哪里。
如果这些在表单中，只需将按钮设置为type='button'（或者无论如何都可以这样做），因为默认是提交
@NicholasTower 你知道了，已添加到编辑中。
@MarkSchultheiss 这些按钮是表格的一部分而不是表格，但我会试一试

标签： javascript reactjs

【解决方案1】：

为了渲染组件，你必须使用 useState 钩子，定义一个状态变量，当你点击一个按钮时，改变状态以便组件渲染并将状态值保持为你想要它改变的颜色。

【讨论】：

也许更新一些代码来说明你在这里的建议？
这里的行对象是什么..它是一个状态还是只是一个道具？或者如果值是从一个减速器中获取的，你可以向那个减速器发送一个动作。如果你能更多地描述它会很棒。
@gnanasaiDachiraju 谢谢你的建议，我已经在帖子中添加了一个编辑以获取有关减速器的更多信息以及 row 来自哪里

【解决方案2】：

研究它，这对我来说是最好的解决方案：

<Button
  style={{ margin: '0px 5px' }}
  variant="contained"
  onClick={() => {
    handleClick(row.insight_id, row.device_id, 1);
    row.userConfirmed = 1;
  }}
  color={
    row.userConfirmed == null
      ? 'default'
      : row.userConfirmed === 1
      ? 'primary'
      : 'default'
  }
>
  Yes
</Button>

<Button
  style={{ margin: '0px 5px' }}
  variant="contained"
  onClick={() => {
    handleClick(row.insight_id, row.device_id, 0);
    row.userConfirmed = 0;
  }}
  color={
    row.userConfirmed == null
      ? 'default'
      : row.userConfirmed === 1
      ? 'default'
      : 'primary'
  }
>
  No
</Button>

我为更新 row.userConfirmed 值（用于确定按钮的颜色）的每个按钮保留了 onClick 事件处理程序。

这将在单击“是”或“否”按钮时更新 row.userConfirmed 值，并且按钮将以正确的颜色呈现。

我仍在使用handleClick 来发送更新我状态下的数据的操作，然后在我返回页面时使用更新后的数据设置正确的按钮颜色。

 const handleClick = (insightId, deviceId, value) => {
    dispatch(updateUserConfirm(insightId, deviceId, value));
  };

【讨论】：