web-dev-qa-db-ja.com

チェックボックスをredux-formおよびreact-semantic-uiで機能させることができません

redux-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)の出力は空です。

reactjssemantic-uiredux-formsemantic-ui-react
6
Tushar Khatiwada

セマンティック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>
8
Iurii Budnikov

チェックボックスがオンになっているかどうかを知りたい場合は、

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

の代わりに

onChange={input.onChange}

これが 実例

2
QoP