ボタンを押したときの入力文字列をeval入力して反応させます

Question

私はいくつかのユーザー（javascript）入力を評価することを含む反応を伴うweb-appコーディングゲームを作りたいと思います。

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

私はテキスト入力がthis.anotherScript（）内のユーザーの種類（ユーザーがボタンを押した上でJavaScriptを評価することができるだろうと期待していた。「？ウィルこの作品」。とコンソールログ残念ながら、それはうまくいかず、Reactに固有の問題だと思われます。入力ボックスが入力されるとすぐに、ボタンを押さなくても文字列を評価しようとします。例を参照してください：https://codesandbox.io/s/54rkp584ll

誰でも最初の文字入力でjavascriptを破らない適切なReactソリューションを持っています（機能を評価します）？

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

    // ... 
}