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

Question

我的视图看起来像这样(但为了简单起见，我把它瘦了

(查看.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>
}
}

验证.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;
}
}

核心问题

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

需要了解的问题

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

Answer 1

正如skyboyer回避的那样，问题是绑定箭头函数

在验证中.js已更改

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

自

export const Validate = function ({ currentTarget }) {

Answer 2

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