Reactjs 以React形式显示的两个下拉列表

我希望通过两个下拉列表获取用户对表单的输入，并使用react将其存储在全局变量中。我研究了如何创建表单，并稍微操纵了一下它们的代码，使其具有两个下拉列表，但无法将变量保存为全局变量并将该全局变量打印到屏幕上。不幸的是，当我点击第二个提交按钮时出现了一个错误（第一个按钮什么也没做）。下面是错误：TypeError:this is undefined handleSubmit src/App.js:55 52 | 53 | handleSubmit（event）{54 | event.preventDefault（）；>55 | two=this.state.value | ^56 | 58 | render（）{–。这是我在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;

从“React”导入React；
导入“/App.css”；
var one=“”；
var-two=“”；
类FavorFormOne扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:“couch”}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
event.preventDefault（）；
一=这个.state.value
}
render（）{
返回(
选择您最喜欢的口味：
葡萄柚
石灰
椰子
芒果
);
}
}
类FlavorFormTwo扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:“GrabeFruit”}；
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
event.preventDefault（）；
二=此.state.value
}
render（）{
返回(
选择您最喜欢的口味：
葡萄柚
石灰
椰子
芒果
);
}
}
函数App（）{
返回(
{1}
{two}
);
}
导出默认应用程序；

您没有通过

事件

尝试
onSubmit={（e）=>this.handleSubmit（e）}

另外，
onChange={（e）=>this.handleChange（e）}
在您的代码中需要解决一些问题。第一个问题是
this.handleSubmit=this.handleSubmit.bind（this）；
需要添加到
FlavorFormTwo
的构造函数中，正如我在评论中提到的。第二个是全局变量的处理。当全局变量更改时，React不会重新呈现组件，但当状态更改为
setState
时，它会重新呈现。这就是React状态不更新wh的原因使用
this.state=
。相反，我将onSubmit作为一个道具添加到这两个handleSubmit函数中，并在这两个handleSubmit函数中添加了
this.props.onSubmit（this.state.value）
。我将
App
组件更改为一个类，并为
handleOneSubmit
和
handlewosubmit
添加了设置App状态的函数。请联机试用：

从“React”导入React；
导入“/App.css”；
类FavorFormOne扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:“couch”}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
event.preventDefault（）；
this.props.onSubmit（this.state.value）；
}
render（）{
返回(
选择您最喜欢的口味：
葡萄柚
石灰
椰子
芒果
);
}
}
类FlavorFormTwo扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:“GrabeFruit”}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
event.preventDefault（）；
this.props.onSubmit（this.state.value）；
}
render（）{
返回(
选择您最喜欢的口味：
葡萄柚
石灰
椰子
芒果
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={1:，2:：}；
this.handleOneSubmit=this.handleOneSubmit.bind（this）；
this.handletwsubmit=this.handletwsubmit.bind（this）；
}
handleOneSubmit（值）{
this.setState（{one:value}）；
}
handleTwoSubmit（值）{
this.setState（{two:value}）；
}
render（）{
返回(
{this.state.one}
{this.state.two}
);
}
}
导出默认应用程序；
在
FlavorFormTwo
中，您不能将
handleSubmit
绑定到
此
。请尝试添加
this.handleSubmit=this.handleSubmit.bind（this）；
在构造函数中。保存在全局变量中后，它不会将输出打印到屏幕上。保存在全局变量中后，它不会将输出打印到屏幕上。我认为您在React Js中声明全局变量的方法不正确。请看这个。或者尝试将{1}和{2}作为状态。
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;