无法做出与Redux的形式复选框工作和反应语意UI

我试图使用Redux的形式与反应语意UI，并具有与该复选框组件的麻烦。 复选框未被检查。我遵循还原形式文档的示例，但没有运气。以下是代码片段：无法做出与Redux的形式复选框工作和反应语意UI

renderCheckBox = ({ input, label }) => { 
    console.log(input.value); 
    return (
    <Form.Field> 
     <Checkbox 
     label={label} 
     checked={input.value ? true : false} 
     onChange={input.onChange} 
     /> 
    </Form.Field> 
    ); 
}; 



<Field 
    name="activated" 
    label="Activate?" 
    component={this.renderCheckBox} 
/>

console.log(input.value)的输出为空。

来源

2017-06-14 Tushar Khatiwada

如果你想知道该复选框是否被选中与否，你必须使用

onChange={(e, { checked }) => input.onChange(checked)}

，而不是

onChange={input.onChange}

这里有一个working example

来源

2017-06-14 06:01:53 QoP

嗨，示例不在这里工作。它只显示“Loading”。 –

您使用的是IE还是过时的网络浏览器？您应该看到类似[this]（http://i.imgur.com/zfkRuAA.png） – QoP

我正在使用最新版本的Chrome。现在表格也显示出来了。我也尝试了你的代码，但问题是一样的。我发现在** input type =“复选框**上有** hidden **类，它有'z-index：-1'。我删除了'z-index'，现在按预期工作。你的工作不需要删除** z-index **值 –

可重复使用的终极版形式复选框与语义ui

import React from 'react'; 
import { object } from 'prop-types'; 
import { Field } from 'redux-form/immutable'; 
import { Checkbox as CheckboxUI } from 'semantic-ui-react'; 

const Checkbox = ({ 
    input: { value, onChange, ...input }, 
    meta: { touched, error }, 
    ...rest 
}) => (
    <div> 
    <CheckboxUI 
     {...input} 
     {...rest} 
     defaultChecked={!!value} 
     onChange={(e, data) => onChange(data.checked)} 
     type="checkbox" 
    /> 
    {touched && error && <span>{error}</span>} 
    </div> 
); 

Checkbox.propTypes = { 
    input: object.isRequired, 
    meta: object.isRequired 
}; 

Checkbox.defaultProps = { 
    input: null, 
    meta: null 
}; 

export default props => <Field {...props} component={Checkbox} />;

如何使用？

import Checkbox from './Checkbox'; 

<form> 
... 
<Checkbox name="example" /> 
... 
</form>

来源

2017-06-23 21:32:43

无法做出与Redux的形式复选框工作和反应语意UI

回答

相关问题