我正在用reactjs和nodejs写一个leetcode克隆。为了挑战我自己，我将它作为一个类而不是一个整体函数来编写。在这两种情况下，我似乎都不知道如何让<button onClick={（）=> axios.post（“http：//localhost：80/python”，{code}）}>[Run]返回字段的输入而不是变量。“This”也没有被传递下来，或者它可能是node.js的问题。尝试除未更改的“代码”之外的任何操作都会导致编译错误。我附上了以下代码：

import React from "react";
import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/keymap/sublime';
import 'codemirror/theme/monokai.css';
import axios from 'axios';
import './App.css';

class App extends React.Component {
  reload = () => {
    this.setState({
      index: this.state.index+1,
      //index: this.state.index-1
    });
  }

  runCode = () => {
    this.setState({codea: true})
  }

constructor(props) {
  super(props);
  this.state = {
      DataisLoaded: false,
      count: 0,
      index: 0,
      firstName: '',
      lastName: '',
      age: '',
      email: '',
      description: '',
      hobbies: '',
      location: '',   
      codea: false,
      code: 'console.log("Hello World")',  
  };
  //this.Select = this.Select.bind(this);
}

componentDidMount() {
  fetch(
    //"https://jsonplaceholder.typicode.com/users")
    "http://localhost")
      .then((res) => res.json())
      .then((json) => {
          this.setState({
              items: json,
              DataisLoaded: true
          });
      })
}

render() {

const videos = new Array("https://www.youtube.com/embed/aXXZwyeTJ98");
videos.push("https://www.youtube.com/embed/GnodscC2p-A");

var map = new Map();
for(var s = 0; s < videos.length; s++){
  map.set(videos[s]);
  } 

let i = 0;
while (i < videos.length) {
  if (i === this.state.count){
var video = videos[i];
}
  i++;
}
  
  const { DataisLoaded, items } = this.state;
  if (!DataisLoaded) return <div>
      <h1> Please wait some time.... </h1> </div> ;

var codea = 0;
var code = 'console.log("Hello World")';
return (
  <>   <div className = "App">
  <header className="App-header"> 
      <h1 className="text-1xl font-bold underline">    
        </h1>
        <table>
        <tr><td>
      <button onClick={() => this.setState({ count: this.state.count - 1 })}>
          [Last]
        </button>   </td><td><p><code>-</code> Video {this.state.count} <code>-</code> </p>
 </td><td>         <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          [Next]
        </button>
        
        </td></tr>
        </table>
        <iframe key={this.state.index} width="560" height="315" src={video} title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<div ClassName ="absolute top-20 bottom-40 left-10 right-10 text-11">
</div>

<div>
        <CodeMirror
          value={this.state.code}
          options={{
            mode: 'python',
            lineNumbers: true,
          }}
          onChange={(editor, data, value) => {
             this.setState({
              codea: false,
              code: value,
            }
            
            )
          }}
        />
       
        <button onClick={() => axios.post("http://localhost:80/python", {code})}>[Run]</button>

        <div className="Output">
          <pre>{this.state.codea && this.state.code}</pre>
          
        </div>
      </div>    
      
      </header>
       </div>
       
 </> 
);
}
}
export default App;

个字符
我已经尝试了我能想到的一切。到目前为止，没有任何工作。