2

高次コンポーネントを介して管理される制御された入力を持つフォームがあります。構造は次のようになります。

フィールド高次成分

function BaseField(WrappedComponent) {
  class WrappedField extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: '',
        active: false,
      }
    }

    setValue = (e) => {
      this.setState({ value: e.target.value })
    }
    ...
    <WrappedComponent
      {...this.props}
      value={this.state.value}
      set={this.setValue}
      active={this.state.active}
    />
    ....

分野

import React from 'react';
import BaseField from './BaseField';

const TextField = (props) => {
  return <input
    value={props.value}
    onChange={props.set}
    name={props.name}
    type={props.type}
  />
}

export default BaseField(TextField);

これを使用TextFieldするとうまく機能しますが、より柔軟に使用したいのですが、たとえば、onChange場合によっては機能を強化して、常に状態を設定するだけでなく、状態に基づいて他のことを実行できるようにしたいと考えています。が使用されているコンポーネント内のまたは関数TextField。

HOC の仕組みを誤解していますか?

4

1 に答える 1

1

react-bootstrap のようなものを使用できcreateChainedFunctionます:

function createChainedFunction(...funcs) {
  return funcs
    .filter(f => f != null)
    .reduce((acc, f) => {
      if (typeof f !== 'function') {
        throw new Error('Invalid Argument Type, must only provide functions, undefined, or null.');
      }

      if (acc === null) {
        return f;
      }

      return function chainedFunction(...args) {
        acc.apply(this, args);
        f.apply(this, args);
      };
    }, null);
}

そして私の反応ユーティリティからの何か：

export function copyPropsWithout(props, without) {
  const propKeys = Object.keys(props);
  const passProps = propKeys.reduce((obj, propKey) => {
    if (without.indexOf(propKey) === -1) {
      obj[propKey] = props[propKey];
    }

    return obj;
  }, {});

  return passProps;
}

これらをユーティリティに追加して、次のように使用します。

 ...
    <WrappedComponent
      {...copyPropsWithout(this.props, ['onChange'])}
      value={this.state.value}
      set={createChainedFunction(this.setValue, this.props.onChange}}
      active={this.state.active}
    />
    ....
于 2017-01-06T00:38:07.270 に答える