在Redux表单中渲染material-ui-next复选框 [英] Rendering material-ui-next Checkbox inside a Redux Form

问题描述

尝试在redux-form中呈现一个简单的material-ui-next复选框时遇到一些麻烦.我正在遵循官方示例，并尝试使其适应于等效于material-ui-next，因为该示例使用的是material-ui的旧版本.这是我最终使用的代码:

I am having some trouble trying to render a simple material-ui-next checkbox inside a redux-form. I am following the official example and trying to adapt it to the material-ui-next equivalent, since the example is using the older version of material-ui. This is the code that I end up using:

const renderCheckbox = ({ input, label }) => (
  <FormGroup row>
    <FormControlLabel
      control={
        <Checkbox
          checked={input.value ? true : false}
          onChange={input.onChange}
          value="checkedA"
        />
      }
      label="Secondary"
    />
  </FormGroup>
);

这就是我在redux-form中定义复选框的方式:

And this is how I define the checkbox inside redux-form:

...
<Field name="activated" component={renderCheckbox} label="Activated" />
...

但是，当我保存代码时，React会抱怨以下错误:

However when I save the code, React is complaining with the following error:

index.js:2178警告:React.createElement:类型无效- 预期的字符串(用于内置组件)或类/函数(用于 复合组件)，但得到:未定义.您可能忘记了出口 您的组件来自其定义所在的文件，否则您可能已经混入了 设置默认导入并命名导入.

index.js:2178 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

通过myForm.js:108检查您的代码.

Check your code at myForm.js:108.

代码的第108行是在上述renderCheckbox()方法内部定义的<Checkbox />组件.

Line 108 of the code is the <Checkbox /> component that is defined inside the aforementioned renderCheckbox() method.

推荐答案

当我终于找到解决办法时，我在这个问题上也停留了很长时间. 它对返回复选框的功能组件不起作用. 我制作了一个单独的类组件，并将其包装在Redux Field组件中，并且效果很好.我真的不明白为什么它不能对功能组件起作用，因为它们在官方示例中显示了什么.

I was also stuck on this issue for quite some time when I finally found a fix to this. It never works for a functional component which returns a check box. I made a separate class component and wrapped it in Redux Field component and it worked perfectly. I really never understood why it didn't work for the fucntional component as it what is shown in their official example.

我已经编写了对我有用的代码.希望对您有所帮助:)

I have written the code that worked for me. Hope it helps :)

class CheckBoxInput extends React.Component {

  onCheckBoxSelectChange = (input) => 
  {
    input.onChange();
    this.props.onSelectChange();
  }

  render() {
    const { label, input,} = this.props;
    let name = input.name;

    return (
      <div>
        <InputLabel htmlFor={label} style={{paddingTop: '15px'}}> {label} </InputLabel>
         <FormControl {...input} >
          <Checkbox
            name = {name}
            label = {label}
            color= "primary"
            checked={input.value ? true : false}
            onChange={() => this.onCheckBoxSelectChange(input)}
          />          
        </FormControl>
      </div>

    )
  }
}

const CheckBox = (props) => <Field component={CheckBoxInput} {...props} />;
export default CheckBox;

并使用此复选框组件:

 <CheckBox  name="isCurrent" label="Current" onSelectChange = {this.toggleCurrentEmployerSelection} />

这篇关于在Redux表单中渲染material-ui-next复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！