小编Nar*_*kur的帖子

在 redux-form 中使用 onBlur

我正在使用 redux-form 7.0.4,除了以下问题之外,它工作正常。

新用户可以输入详细信息,现有用户可以在同一表单上编辑详细信息。当现有用户编辑详细信息并从表单字段中删除数据时,我遇到了问题。我想添加检查 onBlur。如果用户为空表单字段并且有模糊事件,我需要在字段内填充初始数据。

如果字段为空,则在模糊时恢复初始/服务器值。

表单字段:

<Field
  component={InputField}
  type='text'
  name='registeredName'
  className='form-control'
  required
  placeholder='Registered Business Name*'
/>
Run Code Online (Sandbox Code Playgroud)

输入字段组件:

const InputField = ({
  input,
  type,
  placeholder,
  meta: { touched, error, initial }
}) => {
  const onChange = (e) => {
    const val = e.target.value;

    if (type === 'phoneNumber') {
      if (!/^\d+$/.test(val) || String(val).length > 10) {
        return;
      }
    }

    input.onChange(e);
  };


  return (
    <div className='form-group'>
      <input
        {...input}
        onChange={onChange}
        type={type}
        className='form-control'
        placeholder={placeholder}
        value={input.value }
        onBlur={e => {input.value = (!e.target.value) ? initial …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux redux-form react-redux

5
推荐指数
1
解决办法
2579
查看次数

标签 统计

javascript ×1

react-redux ×1

reactjs ×1

redux ×1

redux-form ×1