两个下拉列表以反应形式出现

Question

我想通过两个下拉列表获取用户对表单的输入，并使用react将其存储在全局变量中。我查看了reacts文档，了解了如何创建表单，并稍微处理了一下它们的代码，使其具有两个下拉列表，但无法将变量保存为全局变量，并将该全局变量打印到屏幕上。不幸的是，当我点击第二个提交按钮时出现了一个错误（第一个按钮什么也没做）。这里有一个错误：TypeError：这是未定义的handleSubmit src/App。js:55 52 |}53 | handleSubmit（event）{54 | event.preventDefault（）；

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

代码中有几件事需要修正。第一个是这个。handleSubmit=这个。手推。捆绑（这个） 需要添加到FlavorFormTwo的构造函数中。第二个是处理全局变量。当全局变量更改时，React不会重新渲染组件，但当使用setState更改状态时，它会重新渲染。这就是为什么在使用This时，react state不会更新的原因。state=。相反，我将onSubmit作为一个道具添加到这两个函数中，并在这两个handleSubmit函数中添加了this。道具。onSubmit（this.state.value）。我将App组件更改为一个类，并为handleOneSubmit和handlewosubmit添加了设置App状态的函数。在线试用：https://codesandbox.io/s/vibrant-smoke-tsgri?file=/src/App.js

import React from "react";
import "./App.css";

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();
    this.props.onSubmit(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);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }
  handleSubmit(event) {
    event.preventDefault();
    this.props.onSubmit(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 App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { one: "", two: "" };
    this.handleOneSubmit = this.handleOneSubmit.bind(this);
    this.handleTwoSubmit = this.handleTwoSubmit.bind(this);
  }
  handleOneSubmit(value) {
    this.setState({ one: value });
  }
  handleTwoSubmit(value) {
    this.setState({ two: value });
  }
  render() {
    return (
      <>
        <FlavorFormOne onSubmit={this.handleOneSubmit} />
        <FlavorFormTwo onSubmit={this.handleTwoSubmit} />
        {this.state.one}
        {this.state.two}
      </>
    );
  }
}

export default App;

Answer 2

您没有通过事件

尝试onSubmit={（e）=

另onChange={（e）=