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

时间:2018-08-01 11:29:03

标签: javascript reactjs redux capitalization

我正在尝试大写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字段的首字母大写?

1 个答案:

答案 0 :(得分: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}
/>