尝试使用dragonallySetInnerHTML将脚本放入React中

Question

我正在尝试在React上编写XSS CTF练习。首先，我试图获取一个固定的javascript警报，以使用dragonallySetInnerHTML运行。我相信，提交后，它会将脚本添加到网页上，但不会运行。预先谢谢你！

import React, { Component } from "react"; 
import {withRouter} from 'react-router'; 
import ReactDOM from 'react-dom'; 

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {value: '', final: 'asdf'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault()
    this.setState({final:'<script type="text/javascript">alert(1)</script>'})
  }


  render() {
    return (
    <div>
      <form onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Type a message" id="messageField" onChange={this.handleChange}/> <br/>
        <input type="submit" className='submitbutton' value="Submit" />
      </form>

      <div dangerouslySetInnerHTML={{__html: this.state.final}} />
    </div>
    );
  }
}


export default withRouter(User)