Question

我在尝试在redux-form内渲染一个简单的material-ui-next复选框时遇到了一些麻烦。我正在关注official example并尝试将其调整为material-ui等效项，因为该示例使用的是const renderCheckbox = ({ input, label }) => ( <FormGroup row> <FormControlLabel control={ <Checkbox checked={input.value ? true : false} onChange={input.onChange} value="checkedA" /> } label="Secondary" /> </FormGroup> );的旧版本。这是我最终使用的代码：

redux-form

这就是我在... <Field name="activated" component={renderCheckbox} label="Activated" /> ...中定义复选框的方式：

<Checkbox />

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

index.js：2178警告：React.createElement：类型无效 -   期望一个字符串（用于内置组件）或一个类/函数（用于   复合组件）但得到：未定义。你可能忘了出口了   您的组件来自其定义的文件，或者您可能已经混合了   默认和命名导入。

检查myForm.js上的代码：108。

代码的第108行是在上述renderCheckbox()方法中定义的class CommandsList extends React.Component { constructor(props){ super(props); } addCommand = () => { this.props.navigation.navigate("CreateCommand"); } render() { return ( <SafeAreaView style={{flex:1}}> <MyList itemsUrl="http://localhost:9000/commands"/> <Button title="Ajouter" onPress={this.addCommand}></Button> </SafeAreaView> ); } } export default StackNavigator({ CommandsList : { screen : CommandsList, }, });组件。

Answer 1

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

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

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表单中渲染材质-ui-next Checkbox

1 个答案: