Question

当用户在文本字段中输入文本时，我尝试了多种方法来实现mutator来将文本转换为大写。但是还没有成功。 Erick提供的example似乎是正确的，但也许我遗漏了一些东西。

/** 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在那里未定义。非常感谢您的帮助！

更新：2018年10月27日

我已经意识到我们也可以使用解析器来解决此问题：

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


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

仍在寻找mutator的工作方式以及代码中的错误是什么。

已尝试： Mutate state based on existing fields

How to set/change Field value from external user action ? React Final Form

Answer 1

据我所知，react-final-form可以直接获取此数据我会建议，您可以使用此代码 onChange={(event, value) => input.onChange(value.toUpperCase())}

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

突变体将文本转换为大写

1 个答案: