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

Question

我想创建一个包含评估一些用户（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(); 并且控制台记录“这会工作吗？”。不幸的是，它没有工作，我怀疑这是 React 特有的问题。一旦输入输入框，它就会尝试评估字符串（甚至没有按下按钮！）。请参阅此处以获取示例：https://codesandbox.io/s/54rkp584ll

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

Answer 1

当你输入时

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

您正在呼叫this.funScript。删除括号，您将按照您的意愿传递函数。此外，funScript 需要绑定到 this 才能工作。

Answer 2

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

class Test {

    // ...

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

    // ...
}