我想在输入表单中显示我的提交数据

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  var input = document.getElementById("myInput").value;
  var output = document.getElementById("output");
  output.innerHTML = "提交的数据是：" + input;
});

<div id="app">
  <form @submit.prevent="submitForm">
    <input type="text" v-model="inputData">
    <button type="submit">提交</button>
  </form>
  <p>提交的数据是：{{ inputData }}</p>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    inputData: ""
  },
  methods: {
    submitForm: function() {
      // 处理表单提交逻辑
    }
  }
});
</script>

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputData: ""
    };
  }

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

  handleSubmit(event) {
    event.preventDefault();
    // 处理表单提交逻辑
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <input type="text" value={this.state.inputData} onChange={this.handleChange.bind(this)} />
          <button type="submit">提交</button>
        </form>
        <p>提交的数据是：{this.state.inputData}</p>
      </div>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById("root"));