javascript - 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}
/>