Question

我收到了这个redux表单输入：

<Field
  component={MyCustomComponent}
  name={name}
  type={type}
/>

使用此自定义元素（引导程序）：

<FormGroup controlId='login'>
  <FormControl name={name} placeholder={name} value={props.value} onChange={input.onChange} {...props} />
</FormGroup>

我这样使用它：

<Input type='text' name='email' placeholder='Email' {...email} />
<Input type='password' name='password' placeholder='Password' {...password} />

发生了奇怪的事。当我选择输入并尝试在里面写东西时，我会自动退出输入（焦点）。当我再次尝试写它时，一切正常。

只有在我加载页面后第一次选择它时才会这样。

完整格式：

<Form onSubmit={handleSubmit(this.onLogin)}>
  <div>
    <Input type='text' name='email' placeholder='Email' {...email} />
    <Input type='password' name='password' placeholder='Password' {...password} />
  </div>
  <Button type='submit' bsStyle='primary' bsSize='large' active>
    <FormattedMessage
      id='login.select-label'
      defaultMessage='Login'
    />
  </Button>
</Form>

完整输入：

export const Input = (props) => {
  const { name, type } = props

  const MyCustomComponent = ({input}: props) => (
    <FormGroup controlId='login'>
      <FormControl name={name} placeholder={name} value={props.value} onChange={input.onChange} {...props} />
    </FormGroup>
  )

  return (
    <Field
      component={MyCustomComponent}
      name={name}
      type={type}
    />

  )
}

专注于自定义redux表单输入的kickout

0 个答案: