Redux-form <Field /> 类型道具不适用于复选框或收音机

编程问答 2022-05-31

问题描述

嗨，我是 redux 表单的新手，我想知道如何使用“文本”以外的输入类型。我浏览了文档，但除了键入“文本”和“电子邮件”之外的任何其他内容都不起作用。例如，我想使用 type="checkBox" 或 "radio" 但它们没有出现在浏览器输出中。我不确定我在这里做错了什么，以及它们不起作用的确切原因。任何帮助将不胜感激。

这是我的 reducers/index.js 文件

import {combineReducers} from 'redux';
import { reducer as reduxForm } from 'redux-form';
import dummyReducer from './dummyReducer';

export default combineReducers({
  dummyReducer: dummyReducer,form: reduxForm
});

这是我的 React 组件，我在其中使用了 redux 表单

import React,{ Component } from 'react';
import { reduxForm,Field } from 'redux-form';

class ServiceList extends Component {

  render () {
    return (
      <div>
        <label htmlFor="employed">Employed</label>
        <Field name="projectOwner" component="input" type="radio" />
      </div>
    );
  }
}

export default reduxForm({
  form: 'projectForm'
})(ServiceList);

带有类型文本（如果使用）的输入字段显示在输出上，但复选框和单选按钮不起作用，只有我用于它们的标签出现。如果这里有某种类型的初学者级别的错误，它没有呈现，我深表歉意。

解决方法

您必须添加 value="some-text" 属性。 请试试这个代码。

<Field name="projectOwner" value="some-text" component="input" type="radio" />
<Field name="projectOwner" value="another-text" component="input" type="radio" />
,

这完全是因为我在简单的旧表单上使用了 Materialize CSS 库。它们具有单独的语法，以便复选框或单选按钮出现在输出中。如果有人遇到相同的初学者级别的问题，我只是想把它放在这里。

javascriptreactjsreactjsreactjsreactjsreduxreduxreduxreduxredux-form