在Redux字段中将输入的首字母大写

Question

我正在尝试大写redux字段输入的首字母。 这是我的代码

const renderField = ({input, className, label, type, meta: {error, touched, submitFailed}}) => {

  return (<div>
    <div>
      <input {...input}
             className={className + ' ' + classNames(submitFailed && ((error && 'empty_field empty_placeholder')))}
             placeholder={label} id={label} type={type}/>
     </div>
  </div>)

};

const SignUp = ({handleSubmit, emailSignUp, signUpStatus}) => {

  return (

       <form onSubmit={handleSubmit(emailSignUp)}>
           <div className="width_100">
                <div className="float_left text_align_left landing_name_cont">
                    <Field
                      className="landing_input"
                      name="signUpFirstName"
                      type="text"
                      maxLength={5}
                      component={renderField}
                      label="First name"
                      validate={[required]}
                    />
              </div>

       </form>

  )
};

export default reduxForm({
  form: 'signUp'
})(SignUp)

当存在正常的输入字段但缺少关于redux字段的示例时，有许多示例可以执行此操作。 如何将redux字段的首字母大写？

Answer 1

我猜您正在寻找的是操纵用户输入。 您可以在这种情况下使用规范化。

Redux文档中有一个很好的例子： https : //redux-form.com/7.1.2/examples/normalizing/

const capitalize = value => value.charAt(0).toUpperCase() + value.slice(1)

<Field
    name="username"
    component="input"
    type="text"
    placeholder="Username"
    normalize={capitalize}
/>