代码之家 › 专栏 › 技术社区 › baconLikeTheKevin725

如何使用MaterialUI通过Redux表单获取Textfield输入值

redux-form material-ui react-redux redux reactjs

1

baconLikeTheKevin725 · 技术社区 · 8 年前

目标:从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',password']})

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

我猜想这是因为道具是从

1 回复 | 直到 8 年前

1

jonahe 8 年前

当您想为Redux表单使用自定义字段时,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 .