reactjs - React 表单中的两个下拉菜单

Question

我想获取具有两个下拉列表的表单的用户输入，并使用react将其存储在全局变量中。我看了reacts docs关于如何创建表单，并稍微操作其代码以具有两个下拉菜单，但无法将其保存为全局变量并将该全局变量打印到屏幕上。不幸的是，当我单击第二个提交按钮时出现错误(第一个按钮没有执行任何操作)。这是错误:TypeError:这是未定义的handleSubmit src/App.js:55 52 | } 53 |处理提交(事件){ 54 | event.preventDefault(); > 55 |二 = this.state.value | ^ 56 | } 57 | 58 | 58使成为() { - 。这是我在 App.js 中的代码:

import React from "react";
import "./App.css";
var one = "";
var two = "";

class FlavorFormOne extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "coconut" };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }
  handleSubmit(event) {
    event.preventDefault();
    one = this.state.value
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Pick your favorite flavor:
            <select value={this.state.value} onChange={this.handleChange}>
              <option value="grapefruit">Grapefruit</option>
              <option value="lime">Lime</option>
              <option value="coconut">Coconut</option>
              <option value="mango">Mango</option>
            </select>
          </label>
          <input type="submit" value="Submit" />
        </form>
        
      </div>
    );
  }
}

class FlavorFormTwo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "GrabeFruit" };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }
  handleSubmit(event) {
    event.preventDefault();
    two = this.state.value
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Pick your favorite flavor:
            <select value={this.state.value} onChange={this.handleChange}>
              <option value="grapefruit">Grapefruit</option>
              <option value="lime">Lime</option>
              <option value="coconut">Coconut</option>
              <option value="mango">Mango</option>
            </select>
          </label>
          <input type="submit" value="submit"/>
        </form>
        
      </div>
    );
  }
}

function App() {
  return (
    <>
    <FlavorFormOne />
    <FlavorFormTwo />
    {one}
    {two}
    </>
  );
}

export default App;

Answer 1

您没有通过事件

尝试onSubmit={(e)=>this.handleSubmit(e)}

还有onChange={(e)=>this.handleChange(e)}