JSColor onChange 事件说函数未定义

Question

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

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>
        )
    }
}

我试过将 render() 中的函数移动为 function setLinkTextColor(color)，认为它可能与作用域有关，但我得到了完全相同的错误。

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

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 函数：

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

然后，在您的 JSColor 配置中，您不能使用字符串，因为 JSColor 无法访问您 class 中的函数。相反，这样做：

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>
    )
}

JSColor onChange 事件说函数未定义

JSColor onChange Event saying function is not defined

html

javascript

function

jscolor

reactjs