Question

我有一个名为Counter的类，用于对值进行计数，并且该类有两个称为inc和dec的方法，用于计数。我想创建名为CounterEdit的输入组件，并将value属性连接到Counter类实例。我希望计数器类的计数值更改时输入组件上的更新值。为此，我创建了一个名为useCounter的新钩子函数，该函数本身使用useReducer并将useReducer的调度函数传递给Counter类。计数器类自身增加或减少值，并使用调度功能将计数值发送到减速器。减速器状态更改时，输入组件将更新。但是，如果我使用多个输入组件，则仅更新最后一个输入组件。其他没有变化。我在等待您的帮助，以解决我的问题。谢谢...

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>
          );
        }

反应useReducer调度

0 个答案: