Мутатор для перевода текста в верхний регистр

Question

Я пробовал разные способы реализации мутатора для преобразования текста в верхний регистр, как только пользователь вводит текст в текстовое поле.Но пока не удалось. пример , предоставленный Эриком, кажется правильным, но, возможно, я что-то упустил.

/** Converts a form value to uppercase **/
const upper = ([name], state, { changeValue }) => {
  changeValue(state, name, (value) => value.toUpperCase())
}


<Form
  onSubmit={onSubmit}
  mutators={{
    ...arrayMutators,
    upper
  }}
  render={({
    handleSubmit,
    mutators: { push, pop, upper }, // injected from final-form-arrays above
    pristine,
    reset,
    submitting,
    values
  }) => {
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>Company</label>
          <Field name="company" component="input" onChange={(e) => upper('company')} />
        </div>
      </form>
    )}
  }
/>

Выдает ошибку при вызове toUpperCase для значения, так как value становится неопределенным.Очень ценю любую помощь!

Обновление: 27 октября 2018 года

Я понял, что для решения этой проблемы мы также можем использовать парсер:

upper = value => {
  return value ? value.toUpperCase() : ''
}


<Field name="company" component="input" parse={this.upper} />

Все еще ищу, как работает мутатор и в чем ошибка в моем коде.

Уже пробовал: Изменять состояние на основе существующих полей

Как установить/ изменить значение поля из внешнего действия пользователя ? Реагировать на итоговую форму

Answer 1

Поскольку я знаю о реакции-окончательной форме, вы можете получить эти данные напрямую. Я предлагаю, вы можете использовать этот код onChange={(event, value) => input.onChange(value.toUpperCase())}

https://codesandbox.io/s/0x9y71nwyp