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

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

  •  1
  • 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 年前
        1
  •  1
  •   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 .