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

Question

目标：从material 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'，字段：['email'，'密码']}）

我在我的chrome开发工具控制台中得到的警告是：失败的道具类型：提供给TextField的道具值无效。警告：失败的prop类型：提供给Input的propvalue无效。'

此外，我登录表单中的电子邮件字段显示[对象，对象}我猜这是由于道具从

你知道我哪里出错了吗？

Answer 1

当您想为Redux-Form使用自定义字段时，Redux-form可以让您访问onChange等道具，还可以访问其他元数据（如表单是否被触摸过）。这些不同种类的道具根据类型分组。

您感兴趣的是，与普通输入元素相关联的所有属性（如onChange、value、type）都分组在道具中。输入。因此，您调用的参数password实际上是发送到组件的整个props对象。它看起来像这样的{input:{value:'someValue'，onChange:somFunction..etc.etc}，meta:{toucted: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/

您还可能有兴趣知道，对于coport-ui组件，实际上已经有一个库为您完成了大部分手动工作：redux-form-coport-ui。