Question

我正在使用一个组件： - 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函数时抛出错误。显然它的实现使用了一些像所需的状态变量。

Answer 1

By design，mixins不能与ES6类一起工作 - 试图一起破解某些东西只会让你头疼！

一种解决方案是使用名为higher-order component的函数 - 一个接收组件的函数，并返回一个包裹它的新组件。这些包装器组件可以拥有自己的生命周期钩子，并且可以将道具传递给包装组件，有效地为您提供mixins给您的相同功能，但可以说是更清洁！

formsy-react允许您采用此方法，providing its own 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);

Answer 2

您可以使用react-mixin-decorator。

引自README：

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

使用es6风格

2 个答案: