0

我有一个名为 Counter 的类用于计数值，该类有两个方法，称为 inc 和 dec，用于计数。我想创建名为 CounterEdit 的输入组件并将 value 属性连接到 Counter 类实例。当计数器类的计数值发生变化时，我想要输入组件上的更新值。为此，我创建了名为 useCounter 的新钩子函数，该函数本身使用 useReducer 并将 useReducer 的调度函数传递给 Counter 类。Counter 类自己增加或减少值，并使用 dispatch 函数将计数值发送到 reducer。当 reducer 状态改变时，输入组件会更新。但如果我使用多个输入组件，则仅更新最后一个输入组件。其他方面没有变化。我正在等待您对我错在哪里的帮助。谢谢...

class Counter { 
    constructor() {
      this.value = 0;
    } 

    setValue(data) {
      this.dispatch({ type: "VALUE_CHANGE", payload: data });}
    
      inc() {
        this.setValue(this.value++);
      }

      dec() {
        this.setValue(this.value--);
      }
    }
    
    export { Counter };

现在，我想用这个在类组件中使用reducer

const reducer = (state, action) => {
  switch (action.type) {
    case "VALUE_CHANGE": {
      return { count: action.payload };
    }

    default:
      return;
  }
};

const initialState = { count: 0 };


const useCounter = counterComp => {
  const [state, dispatch] = useReducer(reducer, initialState);


  useEffect(() => {
    if (counterComp) {
      counterComp.dispatch= dispatch;
    }
  }, [counterComp]);

  return state;
};

在这里我的输入组件从减速器获得价值：

const CounterEdit = props => {
  const state = useCounter(props.counter);

  return <input type="text" value={state.count} />;
};

当我运行这个应用程序时，只更改第三个输入值。我想将计数器值反映到所有输入实例。

申请内容：

    export default function App() {

    //counter class instance
        const testCounter = new Counter();
    
          return (
            <div className="App">
              <div className="header">
                <button  onClick={() => testCounter.inc()}> Inc </button>
                <button onClick={() => testCounter.dec()}>  Dec </button>
              </div>
              <div>
                <CounterEdit counter={testCounter} />
                <CounterEdit counter={testCounter} />
                <CounterEdit counter={testCounter} />
              </div>
            </div>
          );
        }
4

0 回答 0