如何在單擊時更改按鈕而無需在 React 中刷新頁面

Question

我有一對“是”“否”按鈕，除非我刷新頁面，否則它們不會改變顏色 onClick。 我的創可貼解決方案是將refresh()添加到handleClick ，每次單擊按鈕時都會強制刷新整個頁面。 雖然這確實改變了按鈕的顏色，但我更希望頁面不必在每次單擊按鈕后刷新並加載到頂部，並且每個按鈕在單擊時無縫地改變顏色。

我嘗試使用此答案中的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];

Answer 1

為了呈現組件，您必須使用 useState 掛鈎，定義一個 state 變量，當您單擊一個按鈕時，更改 state 以便組件呈現並保留 state 值作為您希望它更改為的顏色。

Answer 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 事件處理程序。

我仍在使用handleClick來調度一個操作來更新我的 state 中的數據，然后在我返回頁面時使用更新后的數據設置按鈕的正確 colors。

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