reactjs – 无法使复选框与redux-form和react-semantic-ui一起使

发布时间：2020-12-15 05:05:18 所属栏目：百科来源：网络整理

导读：我正在尝试将reactx-form与react-semantic-ui一起使用,并且在使用Checkbox组件时遇到了问题.未选中复选框.我遵循了redux-form文档中的示例,但没有运气.这是代码段： renderCheckBox = ({ input,label }) = { console.log(input.value); return ( Form.Field

我正在尝试将reactx-form与react-semantic-ui一起使用,并且在使用Checkbox组件时遇到了问题.未选中复选框.我遵循了redux-form文档中的示例,但没有运气.这是代码段：

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)的输出为空.

具有语义ui的可重复使用的redux表单复选框

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!