JSColor onChange 事件说 function 未定义

Question

我正在尝试使用 JSColor 的 onChange 事件来调用 function 但每次触发时，我都会收到一条错误消息，指出未定义 function。 我的代码如下。

export class NavBar extends React.Component {

    constructor(props) {
        super(props);
    }

    setLinkTextColor(color)  {
        console.log("hello")
    }

    render() {
        return (
            <div className="sideOptionContainer">
                <button className="jscolor" id="jscolor1" data-jscolor="{valueElement:'#val3', onChange: 'setLinkTextColor(this)'}">,</button>
                <input id="val3" value="rgba(255,160,0)" name="color3" type="hidden"/>
            </div>
        )
    }
}

我已经尝试将 function 移动到render()中作为function setLinkTextColor(color) ，认为它可能与 Z31A1FD140BE4BEF2D11E121EC9A18A58 有关。

编辑：我尝试了以下修复，从 onChange 中删除字符串并创建一个全局 function -

export class NavBar extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="sideOptionContainer">
                <button className="jscolor" id="jscolor1" data-jscolor="{valueElement:'#val3', onChange: setLinkTextColor(this)}">,</button>
                <input id="val3" value="rgba(255,160,0)" name="color3" type="hidden"/>
            </div>
        )
    }
}

function setLinkTextColor(color)  {
    console.log("hello")
}

虽然我不再收到任何错误，但当我更改颜色输入时，onChange 事件不再触发。

Answer 1

由于这是 React，您需要在构造函数中绑定您的setLinkTextColor function：

constructor(props) {
    super(props);
    
    this.setLinkTextColor = this.setLinkTextColor.bind(this);
}

然后，在您的 JSColor 配置中，您不能使用字符串，因为 JSColor 无法访问 class 内部的 function。 相反，请执行以下操作：

render() {
    const jsColorConfig = {
        valueElement: '#val3', 
        onChange: this.setLinkTextColor
    };

    return (
        <div className="sideOptionContainer">
            <button className="jscolor" id="jscolor1" data-jscolor={jsColorConfig}>,</button>
            <input id="val3" value="rgba(255,160,0)" name="color3" type="hidden"/>
        </div>
    )
}