Как использовать handleChange в виджете Reaction-Numpad? - PullRequest
Новая
       6

Как использовать handleChange в виджете Reaction-Numpad?

0 голосов
/ 24 февраля 2020

Это мой созданный мной виджет Reaction-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)}

It работает нормально, но поле не обновляется со значением, которое я выбрал из своей цифровой клавиатуры.

например, я выбрал 44 при выполнении этой строки:

onChange={(value) => console.log("price's value",value)} и показывает значение на консоли, но поле из numpad не обновляет и не показывает выбранное значение. Он пуст.

Итак, мне нужно использовать метод handleChange для изменения входного значения, но он не реализован должным образом.

Как я могу решить эту проблему? Кто-нибудь знает, как я могу решить эту проблему?

1 Ответ

0 голосов
/ 24 февраля 2020

Я вижу, что компонент приложения является функциональным компонентом. Так что this.setState способ обновления состояния не будет работать. Вам нужно будет использовать useState крючок.

Для получения дополнительной информации - https://reactjs.org/docs/hooks-state.html

...