Как изменить значение поля ввода при изменении

ProgramBox

Как изменить значение поля ввода при изменении

Post author:admin
Запись опубликована:18 марта, 2023
Post category:Вопросы по программированию

#javascript #reactjs

Вопрос:

Я хочу отформатировать любой ввод поля ввода как валюту:

 <input
    type="text"
    value="0,00 EUR"
    onChange={(e) => {
        e.target.value = generateCurrency(e.target.value)
    }}
/>

const generateCurrency = (input) => {
    const formattedCurrency = // do something with input
    return formattedCurrency;
}

Моя проблема в том, что значение поля ввода не изменяется. Возможно e.target.value = generateCurrency(e.target.value) , это неверно.

Я планирую позволить пользователю создавать несколько таких полей ввода. Таким образом, я избегаю использования перехвата состояния. Я пытаюсь сделать это непосредственно из onChange для этого значения. Возможно ли это?

Ответ №1:

Вам нужно определить для него локальное состояние.

 <input
    type="text"
    value={this.state.inputValues['text1']}
    onChange={(e) => {
        const value = generateCurrency(e.target.value)
        this.setState({ inputValues['text1']: value });
    }}
/>

const generateCurrency = (input) => {
    const formattedCurrency = // do something with input
    return formattedCurrency;
}

1. Есть ли какое-либо другое решение, поскольку я планирую позволить пользователю создавать несколько таких полей ввода. Таким образом, мне понадобится динамическое состояние ?! Вот почему я пытаюсь сделать это непосредственно из onChange для этого значения.

2. У вас может быть объект или массив в состоянии

Ответ №2:

Я избегаю использования перехвата состояния. Я пытаюсь сделать это непосредственно из onChange для этого значения. Возможно ли это?

Я думаю, что НЕТ, я не уверен в этом.

Но я настоятельно рекомендую не избегать состояния.

Итак, вам просто нужно инициализировать конструктор состояния.

 constructor (props) {
    super(props);
    this.state = {
         currency: "0,00 EUR"
    };
}

Затем измените свой Input тег, как показано ниже.

 <input
    type="text"
    value={this.state.currency}
    onChange={e => this.generateCurrency(e.target.value)}
/>

Затем сделайте последнее, просто измените свою generateCurrency функцию.

 const generateCurrency = (input) => {
     this.setState({
         currency: value
     });
}

1. Я думаю, это будет работать только в том случае, если есть одно единственное поле ввода. Но у меня их будет много.

2. Пожалуйста, опишите, что вы хотите. Вам нужно значение многих полей ввода?

3. Как я уже писал, я хочу, чтобы пользователь создавал несколько полей ввода. Он нажимает кнопку, и появляется новое поле ввода с валютой. Вот почему я подумал, что имеет смысл не использовать состояния и обрабатывать их напрямую из onChange.

Ответ №3:

Де-факто хранение валют означает хранение числа с 2 десятичными знаками ( Number.prototype.toFixed(2) ). Добавление символа валюты или других элементов в элемент структуры данных не является надежным обходным путем, поскольку для выполнения операций или аналогичных операций потребуется их анализ.

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

Сохраняя эти данные в массив, вы можете добавлять ячейку всякий раз, когда у вас есть дополнительный ввод, для которого требуется маска такого типа. Все, что касается валюты, управляется внутри самого ввода. Я также добавил ссылку на конструктор в приведенный ниже код.

   constructor(props) {
    super(props);
    this.state = { currencyValues: [] };
  }

  render() {
    return (
      <input
        type="text"
        onChange={e => {
          let res = this.state.currencyValues;
          res.push((e.target.value.split('€')[1] * 1).toFixed(2));
          this.setState({ currencyValues: res });
        }}
        value={`€${
          this.state
            .currencyValues[1] /* E.G. With 2 inputs you populate cells 0 and 1 of the Array */
        }`}
      />
    );
  }