Reactjs TextField在动画完成后重定向到主页面

我一直在尝试使用

@material ui

中的sylized输入字段，但在执行此操作时：

<TextField
  id="outlined-basic"
  className={classes.inputField}
  color="primary"
  label="Message"
  variant="filled"
  onChange={this.handleChange}
/>

我在另一个react项目中有完全相同的代码，但我仍然遇到这个问题，无法找出原因。在此方面的所有帮助将不胜感激！谢谢

编辑： 以下是完整的代码：

import React, { Component } from "react";
import ".././App.css";
import { Title } from "../Components/Title";

// MUI Stuff
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button/Button";

// Theme
import theme from "../Util/theme";

const styles = {
  ...theme.spreadIt,
};


class BugsMain extends Component {
  constructor(props) {
    super(props);
    this.id = "0";
  }

  handleChange = (e) => {
    this.setState({text: e.target.value})
  }

  render() {
    const { classes } = this.props;
    return (
      <div className="App">
        <header className="App-header">
          <Title title="Bugs | Root_Directory" />
          <p>
            <h1> Feedback </h1>
          </p>
          <a className="App-link" href="/">
            <Button className={classes.button} href="">Submit A Bug Report</Button> <br /> <br />
            <TextField
              id="outlined-basic"
              className={classes.inputField}
              color="primary"
              label="Message"
              variant="filled"
              onChange={this.handleChange}
            /><br />
            <Button className={classes.button} href={"/bug-viewer?id=" + this.id}>Find A Bug Report</Button> <br /> <br />
            <Button className={classes.button} href="/">Return to home</Button>
          </a>
        </header>
      </div>
    );
  }
};


export default withStyles(styles)(BugsMain);

import React，{Component}来自“React”；
导入“././App.css”；
从“./Components/Title”导入{Title}；
//梅的东西
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/TextField”导入TextField；
从“@物料界面/核心/按钮/按钮”导入按钮；
//主题
从“./Util/theme”导入主题；
常量样式={
…主题，传播它，
};
类BugsMain扩展组件{
建造师（道具）{
超级（道具）；
此参数为1.id=“0”；
}
handleChange=（e）=>{
this.setState（{text:e.target.value}）
}
render（）{
const{classes}=this.props；
返回(

反馈

);
}
};
导出默认样式（样式）（BugsMain）；

这是因为

TextField

位于

a

标记内。

---

请将

TextField

移到

a

标记之外。

原因是

，如果发送时没有错误，您应该具有重定向或某些逻辑，以重定向到特定页面…

如果您临时从文本字段中删除onChange，结果会是什么？发生完全相同的情况。您可以附加整个代码库吗？当然，我会将其添加到编辑器中。在您的代码中，您是否尝试在

handleChange

中进行导航？此组件是否以表单形式呈现？你确定这不是一个按钮或锚定标签触发的问题吗？非常感谢，我其实没有注意到这一点！或者尝试从

a

标记中删除

href=“/”

import React, { Component } from "react";
import ".././App.css";
import { Title } from "../Components/Title";

// MUI Stuff
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button/Button";

// Theme
import theme from "../Util/theme";

const styles = {
  ...theme.spreadIt,
};


class BugsMain extends Component {
  constructor(props) {
    super(props);
    this.id = "0";
  }

  handleChange = (e) => {
    this.setState({text: e.target.value})
  }

  render() {
    const { classes } = this.props;
    return (
      <div className="App">
        <header className="App-header">
          <Title title="Bugs | Root_Directory" />
          <p>
            <h1> Feedback </h1>
          </p>
          <a className="App-link" href="/">
            <Button className={classes.button} href="">Submit A Bug Report</Button> <br /> <br />
            <TextField
              id="outlined-basic"
              className={classes.inputField}
              color="primary"
              label="Message"
              variant="filled"
              onChange={this.handleChange}
            /><br />
            <Button className={classes.button} href={"/bug-viewer?id=" + this.id}>Find A Bug Report</Button> <br /> <br />
            <Button className={classes.button} href="/">Return to home</Button>
          </a>
        </header>
      </div>
    );
  }
};


export default withStyles(styles)(BugsMain);