Javascript 在按钮按下时计算输入字符串

我想用react创建一个web应用程序编码游戏，其中包括评估一些用户（javascript）输入

构造函数（道具）{
超级（道具）；
此.state={
代码：“”
};
}
把手更换（钥匙）{
return event=>this.setState（{[key]：event.target.value}）；
}
funScript（）{
eval（本州代码）；
}
另一个脚本（）{
log（“这行吗？”）；
}
render（）{
返回(
跑
);
}

我希望文本输入能够在用户按下按钮时评估javascript（用户在这个.anotherScript（）中输入；控制台记录“这行吗？”。不幸的是，它不行，我怀疑这是一个特定于反应的问题。一旦输入框被输入，它就会尝试评估字符串（甚至没有按下按钮！）。请参见以下示例：

任何人都有一个合适的React解决方案，在输入第一个字符时不会破坏javascript（并计算函数）？

<button onClick={this.funScript()} >run</button>

运行

---

您正在调用

this.funScript

。删除paren，您只需按需要传递函数。此外，

funScript

需要绑定到此函数才能正常工作。

这里有

funScript

，它使用适当的上下文对代码进行评估：

class Test {

    // ...

    funScript() {
        const code = ("" + this.state.code).replace(/this/ig, "__self__");
        const execute = new Function("__self__", code);
        execute(this);
    }

    // ...
}

---

嗯..我发现只是传递了一个函数来执行这个。funScript（）内部没有绑定funScript。

{this.funScript（）}}>运行

删除括号不起作用，但我猜是因为我没有绑定它。funScriptYeah，创建一个调用函数的arrow函数基本上就是绑定函数。如果你不熟悉arrow函数和

这个

，你应该检查一下。这不是非常明显，但非常有帮助/重要站着，这就是“这个”吗在执行的代码字符串中不需要？有用，但我不确定它是否解决了问题。此外，我不熟悉新函数语法，但我将研究它。要从组件

测试
评估方法，您必须手动
传递
上下文。如果没有必要，您可以使用此/self跳过代码。好的一点是在这段代码中，您可以重新定义窗口、文档和其他全局对象，这可能是一个巨大的安全改进。我不太关心安全性（因为它的前端不应该包含用于我目的的安全信息，可能除了会话令牌…）因为我正在使用沙箱处理代码，所以我可以中断用户编写的代码的执行，这会导致错误和无限循环等…但这似乎可能有助于沙箱处理？
class Test {

    // ...

    funScript() {
        const code = ("" + this.state.code).replace(/this/ig, "__self__");
        const execute = new Function("__self__", code);
        execute(this);
    }

    // ...
}