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

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

redux-form material-ui react-redux redux reactjs

baconLikeTheKevin725 · 技术社区 · 7 年前

目标:从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 回复 | 直到 7 年前

jonahe 7 年前

当您想为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 .

推荐文章

Piotr Chmielowiec · 组件从一个调度发出两个api调用

2 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

3 年前

Storm28 · 错误:函数作为子函数无效。如果从渲染返回组件而不是<Component/>,则可能会发生这种情况

3 年前

Stephen Aranda · 如何使用React在前端UI上显示API响应消息?

3 年前

khalil hajri · 无效的钩子调用。钩子只能在函数组件的主体内部调用(react native)

3 年前

ShaySS · 如果我不需要将数据存储在redux存储中,我是否必须使用redux saga从API获取数据?

3 年前

arya.s · Toast错误消息在React/Redux中多次显示。如何避免?

3 年前

jack · 注销后清除redux商店

3 年前

Emm · 添加CombineReducer后无法读取未定义(读取“map”)的属性

3 年前

MariaT · 如何使用bootstrap 4在折叠菜单后面获取徽章?

7 年前