Question

我想创建一个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（）;并且控制台记录“这会起作用吗？”。不幸的是，它没有工作，我怀疑它是一个特定于React的问题。一旦输入输入框，它就会尝试评估字符串（甚至没有按下按钮！）。请看这里的例子：https://codesandbox.io/s/54rkp584ll

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

Answer 1

键入

时

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

您正在呼叫this.funScript。删除parens，你只需要通过你想要的功能。此外，funScript需要与此绑定才能使其正常工作。

Answer 2

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

class Test {

    // ...

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

    // ...
}

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

2 个答案: