Question

目标：从材质UI组件获取输入值，并将它们传递给handleSubmit函数中的动作创建者。

                 <Field name='email'
                  component={email =>
                   <TextField
                    fullWidth
                     autoComplete='off'
                      className={classes.textField}
                      id='email-text-field'
                      label='Email'
                      value={email} />
                    } />

                 <Field name='password'
                  component={password =>
                    <TextField
                      type='password'
                      fullWidth
                      autoComplete='off'
                      className={classes.textField}
                      id='password-text-field'
                      label='Password'
                      value={password} />
                    } />

这是它与Redux连接的方式：

@reduxForm（{form：'loginForm'，fields：['email'，'password']}）

我在chrome dev工具控制台中收到的警告是：失败的道具类型：提供给TextField的道具value无效。警告：失败的道具类型：提供给输入的无效道具value

此外，登录表单中的电子邮件字段显示[对象，对象} 我的猜测是这种情况正在发生，因为道具正在传递道具

关于我哪里出错的任何想法？

Answer 1

如果您想为Redux-Form使用自定义字段，Redux表单可让您访问onChange等道具，以及其他元数据（如果形式是否被触及）。这些不同类型的道具根据类型进行分组。

有趣的是，与普通输入元素相关的所有属性（如onChange，value，type）都归为props.input。因此，您调用password的参数实际上是发送到组件的整个props对象。它看起来像这个{input:{ value: 'someValue', onChange: somFunction.. etc. etc}, meta: { touched: false, etc. etc.}}。

这意味着如果您想像现在一样使用TextField，则需要执行以下操作：

<Field name='email'
    component={({input}) =>
      <TextField
         value={input.value}
         onChange={input.onChange}
         fullWidth
         autoComplete='off'
         className={classes.textField}
         id='email-text-field'
         label='Email'
        />
     } />

这可能会非常混乱，特别是如果你想使用meta道具，那么将自定义组件逻辑分解为自己的功能通常是值得的，就像他们在示例中所做的那样在文档中：https://redux-form.com/7.0.4/examples/material-ui/

您可能也有兴趣知道，对于material-ui组件，实际上已经存在library that has done most of that manual work for you: redux-form-material-ui。

如何使用MaterialUI使用Redux-form获取Textfield输入值

1 个答案: