在react中按下按钮时评估输入字符串

Question

我想用react创建一个web-app编码游戏，包括评估一些用户(javascript)输入。

  constructor(props) {
    super(props);
    this.state = {
      code: ''
    };
  }

  handleChange(key) {
    return event => this.setState({ [key]: event.target.value });
  }

  funScript() {
    eval(this.state.code);
  }

  anotherScript() {
    console.log("Will this work?");
  }

  render() {
    return (
      <div>
        <input 
          type={"text"}
          value={this.state.code}
          onChange={this.handleChange('code')}
         />
        <button onClick={this.funScript()} >run</button>
      </div>
    );
  }

我希望文本输入能够在用户按下按钮时评估javascript (用户在this.anotherScript()中键入；并且控制台日志“这会工作吗？”)。不幸的是，它不工作，我怀疑这是一个特定的反应问题。一旦输入框被输入，它就会尝试计算字符串(甚至没有按钮被按下！)。请看这里的示例：https://codesandbox.io/s/54rkp584ll

谁有一个合适的React解决方案，不会在第一个字符输入时破坏javascript (并计算函数)？

Answer 1

当你输入的时候

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

您正在调用this.funScript。去掉括号，你就可以随心所欲地传递函数了。此外，funScript需要绑定到它才能工作。

Answer 2

这里有funScript，它用适当的上下文评估你的代码：

class Test {

    // ...

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

    // ...
}