如何在 react-numpad 小部件中使用 handleChange？

Question

这是我创建的 react-numpad 小部件：

const state = {
  number: 0
};

//MAYBE the three following lines are wrong. How to use handleChhange in react-numpad?
const handleChange = e => {
  this.setState(e.target.value);
};

const handleBlur = e => {
  if (e.target.value === "0") e.target.value = "0";
};

const handleKeypress = e => {
  const characterCode = e.key;
  if (characterCode === "Backspace") return;

  const characterNumber = Number(characterCode);
  if (characterNumber < 0) {
    e.preventDefault();
  }
};

const myTheme = {
  fontFamily: "Arial",
  textAlign: "center",
  header: {
    primaryColor: "#263238",
    secondaryColor: "#f9f9f9",
    highlightColor: "#FFC107",
    backgroundColor: "#607D8B"
  },
  body: {
    primaryColor: "#263238",
    secondaryColor: "#32a5f2",
    highlightColor: "#FFC107",
    backgroundColor: "#f9f9f9"
  },
  panel: {
    backgroundColor: "#CFD8DC"
  }
};

const priceWidget = ({
  step,
  precision,
  input,
  placeholder,
  label,
  theme,
  props,
  meta: { touched, error },
  ...rest
}) => {
  return (
    <div className="form-group">
      <label forname={input.name}>{label}</label> <br />
      <NumPad.Number
        {...rest}
        step={0.1}
        precision={2}
        placeholder={!input.value ? "please, type a number" : input.value}
        selected={input.value ? new NumPad.Number(input.value) : null}
        onKeyDown={changedVal => handleKeypress(changedVal)}
        onBlur={changedVal => handleBlur(changedVal)}
        //IN the FOLLOWING LINE it doesn't work
        onChange={value => handleChange(value)}
        //BUT IN THIS ONE FOLLOWING LINE WORKS FINE but the field doesn't get the setted value
        // onChange={(value) => console.log("price's value",value)}
        //ISSUE theme= {myTheme}
        //ISSUE  onChange={input.onChange}
        //ISSUE  onBlur={input.onBlur}

        className="form-control"
      />
      <div className="text-danger" style={{ marginBottom: "20px" }}>
        {touched && error}
      </div>
    </div>
  );
};

export default priceWidget;

当我执行这一行时：

onChange={(value) => handleChange(value)}

我遇到了以下问题：

TypeError: 无法读取未定义的属性 'setState'

但是当我执行这个时，另一行：

onChange={(value) => console.log("price's value",value)}

它工作正常，但该字段没有更新我从我的小键盘上选择的值。

例如我在执行这一行时选择了 44:

onChange={(value) => console.log("price's value",value)} 并在控制台上显示值，但小键盘上的字段既不更新也不显示所选值。它是空的。

所以，我必须使用 handleChange 方法来更改输入值，但它没有很好地实现。

我该如何解决这个问题？有人知道我该如何解决这个问题吗？

Answer 1

我看到App组件是一个功能组件。因此 this.setState 更新状态的方式将不起作用。您将不得不使用 useState 钩子。

更多信息 - https://reactjs.org/docs/hooks-state.html

如何在 react-numpad 小部件中使用 handleChange？

How to use handleChange in react-numpad widget?

javascript

reactjs

redux-form