React 表单中的两个下拉菜单

Posted 2023-02-23

【中文标题】React 表单中的两个下拉菜单

【英文标题】：Two dropdowns in a React Form

【发布时间】：2021-03-05 01:04:16

【问题描述】：

我想通过两个下拉列表获取用户输入的表单，并使用 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;

【问题讨论】：

在FlavorFormTwo 中，您不会将handleSubmit 绑定到this。尝试在构造函数中添加this.handleSubmit = this.handleSubmit.bind(this);。

保存在全局变量中后，它不会将输出打印到屏幕上。

【参考方案1】：

你没有通过event

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

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

【讨论】：

保存在全局变量中后，它不会将输出打印到屏幕上。

我认为你在 React Js 中声明全局变量的方式是不正确的。看看这个***.com/questions/51240409/…。或者尝试将 one 和 two 作为状态。

【参考方案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;