2

我正在使用一个组件：- https://github.com/christianalfoni/formsy-react，用于创建表单。我正在尝试创建我自己的输入组件之一。所以如前所述，我需要使用formy的mixin。但不幸的是，在 es6 风格中不支持它。所以任何人都知道的任何工作。

这是我的组件代码：-

import Formsy from 'formsy-react';

class DropDownAutoComplete extends React.Component {

    constructor(props, context) {
        super(props, context);

       this.mixins = [Formsy.Mixin];
    }

    changeValue(event) {
        this.mixins[0].setValue(event.currentTarget.value);
    }

    handleValue1Change(value) {
        this.setState({value: value});
    }

    render() {

        const className = this.mixins[0].showRequired() ? 'required' : this.mixins[0].showError() ? 'error' : null;

        // An error message is returned ONLY if the component is invalid
        // or the server has returned an error message
        const errorMessage = this.mixins[0].getErrorMessage();
        return <DropdownList
            data={this.props.dropDownConfigs.value}
            onChange={this.changeValue.bind(this)}
            textField={this.props.dropDownConfigs.name}
            caseSensitive={false}
            filter='contains'>
                        </DropdownList>
    }

}

它在调用 showRequired 函数的地方抛出错误。显然它的实现使用了一些状态变量，比如 required 。

4

2 回答 2

1

按照设计，mixin 不能与 ES6 类一起使用——试图将某些东西组合在一起只会让你头疼！

一种解决方案是使用所谓的高阶组件——一个接收组件的函数，并返回一个包裹它的新组件。这些包装器组件可以有自己的生命周期钩子，并且可以将 props 传递给被包装的组件，有效地为您提供与 mixins 相同的功能，但可以说是以更清洁的方式！

formsy-react允许您采用这种方法，提供自己的 HOC：

import {HOC} from 'formsy-react';

class MyInput extends React.Component {
  render() {
    return (
      <div>
        <input value={this.props.getValue()} onChange={(e) => this.props.setValue(e.target.value)}/>
      </div>
    );
  }
};
export default HOC(MyInput);
于 2016-06-06T09:46:31.147 回答
0

您可以使用react-mixin-decorator。

引用自述文件：

如果你正在使用 ES6 类创建 React 组件，并且你想使用现有的 mixin 为你的组件添加一些不错的功能，你可能不想花时间将 mixin 转换为你的 ES6 React 组件类的东西可以用。

于 2016-06-06T09:45:33.090 回答