如何使用 MaterialUI 以 Redux 形式获取文本字段输入值

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', fields: ['email', 'password']})

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

此外，我的登录表单中的电子邮件字段显示 [Object, object} 我的猜测是，这是由于 props 从

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

Answer 1

当你想为 Redux-Form 使用自定义字段时，Redux-form 可以让你访问 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 形式获取文本字段输入值

How to grab Textfield input values with Redux-form using MaterialUI

reactjs

redux

material-ui

redux-form

react-redux