`bind` 不适用于 ReactJS 中的导入函数

Question

我的视图看起来像这样（但为了简单起见，我将其精简了）

view.jsx

import * as R from 'ramda';
import { Validate } from 'src/utils/validate';

class example extends Component {
    constructor(props) {
        super(props);

        this.state = {
            model: EMPTY_MODEL,
            validation: EMPTY_VALIDATION,
        };
        this.validate = R.bind(Validate, this);
    }

    render() {
        <div>
            <input
                id="example"
                type="text"
                onChange={ this.validate }
            />
        </div>
    }
}

validate.js

import * as R from 'ramda';

export const Validate = ({ currentTarget }) => {
    console.log(this); // outputs: {}
    console.log(this.state); //outputs: undefined
    debugger; //console.log(this.state); outputs { model: {}, validation: {} }

    let { validation } = this.state; //Error: Cannot read prop 'validation'of undefined
    const { id, value } = currentTarget;

    switch (currentTarget.id) {
        case 'example':
            if(value.length < 4) {
                this.setState({
                    validation: R.assocPath([id, 'valid'], false, validation),
                });
            }
            break;
        default:
            break;
    }
}

核心问题

我需要做什么才能使用绑定访问 validate.js 内部的 this.state.validation？（我想避免传递 this 作为参数进行验证）

需要理解的问题

为什么控制台在 validate.js 中输出 undefined，但如果我在调试器期间输出变量，我得到预期的值？

Answer 1

你可以试试 this.validate = Validate.bind(this); 吗？

Answer 2

正如 skyboyer 所避开的，问题是绑定箭头函数

在 validate.js 中更改

export const Validate = ({ currentTarget }) => {

至

export const Validate = function ({ currentTarget }) {

`bind` 不适用于 ReactJS 中的导入函数

`bind` not working for imported function in ReactJS

javascript

bind

reactjs