React 表单中的两个下拉菜单

Question

我想通过两个下拉列表获取用户输入的表单，并使用 react 将其存储在全局变量中。我查看了reacts docs 关于如何创建表单，并稍微操作他们的代码以获得两个下拉菜单，但无法将变量保存为全局变量并将该全局变量打印到屏幕上。不幸的是，当我单击第二个提交按钮时出现错误（第一个按钮什么也没做）。这是错误：TypeError：这是未定义的句柄提交 src/App.js:55 52 | 53 |处理提交（事件）{ 54 | event.preventDefault(); > 55 |二 = this.state.value | ^ 56 | 57 | 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

你没有通过event

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

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

Answer 2

您的代码中有几处需要修复。第一个是 this.handleSubmit = this.handleSubmit.bind(this); 需要添加到 FlavorFormTwo 的构造函数中，正如我在 cmets 中提到的。第二个是您对全局变量的处理。 React 不会在全局变量更改时重新渲染组件，但会在状态更改为 setState 时重新渲染。这就是使用this.state = 时反应状态不更新的原因。相反，我添加了 onSubmit 作为两者的道具，并在两个 handleSubmit 函数中添加了this.props.onSubmit(this.state.value)。我将App 组件更改为一个类，并为handleOneSubmit 和handleTwoSubmit 添加了设置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;