Reactjs 我是新的反应，当我点击提交按钮时，什么都没有发生？

这是代码 实际上，这是一个非常新的反应，我正在处理一个项目，该项目即将列出待办事项，但在执行此操作时，我一直在渲染列表项中输入字段的输出。如果有其他解决方案，如没有列表组，这将是非常有益的

我在哪里犯了真正的错误请有人看看这个 提前谢谢

import React, { Component, Fragment } from "react";
class MainPage extends Component {
  state = { data: "" };
  handleChange = (e) => {
    e.preventDefault();};
  handleSubmit = (e) => {
    e.preventDefault();

    this.setState({ data: e.target.value });
  };



render() {
    const mystyle = {
      padding: "16px 16px 16px 60px",
      textAlign: "start",
      fontSize: "24px",
      fontFamily: 'Helvetica Neue", Helvetica, Arial, sans-serif',
      width: "500px",
    };

return (
  <Fragment>
    <h1 className="display-1 text-center" style={{ color: "#f7c6c6" }}>
      todos
    </h1>
    <form className="todo-form" onSubmit={this.handleSubmit}>
      <input
        type="text"
        onChange={this.handleChange.bind(this)}
        className="new-todo shadow-lg p-3 mb-5 bg-white rounded"
        style={mystyle}
        placeholder="What needs to be done?"
      />

      <button className="btn btn-primary btn-sm ml-3">Submit</button>

      <ul className="list-group">
        <li
          className="list-group-item disabled p-3 mb-5 w-50 p-3 mx-auto "
          style={{ width: "200px", fontSize: "24px" }}
        >
          {this.state.data}
        </li>
      </ul>
    </form>
  </Fragment>
);}}

import React，{Component，Fragment}来自“React”；
类主页扩展组件{
状态={data:：}；
handleChange=（e）=>{
e、 preventDefault（）；}；
handleSubmit=（e）=>{
e、 预防默认值（）；
this.setState（{data:e.target.value}）；
};
render（）{
常量mystyle={
填充：“16px 16px 16px 60px”，
textAlign：“开始”，
字体大小：“24px”，
fontFamily:“Helvetica Neue”，Helvetica，Arial，无衬线，
宽度：“500px”，
};
返回(
待办事项
提交


{this.state.data}


);}}

导出默认主页；

从“React”导入React，{Component，Fragment}；
import React, { Component, Fragment } from "react";
class MainPage extends Component {
  state = { data: "" };

  handleSubmit = (e) => {
    e.preventDefault();

    alert(data)
  };



render() {
    const mystyle = {
      padding: "16px 16px 16px 60px",
      textAlign: "start",
      fontSize: "24px",
      fontFamily: 'Helvetica Neue", Helvetica, Arial, sans-serif',
      width: "500px",
    };

return (
  <Fragment>
    <h1 className="display-1 text-center" style={{ color: "#f7c6c6" }}>
      todos
    </h1>
    <form className="todo-form" onSubmit={this.handleSubmit}>
      <input
        type="text"
        onChange={(e) => this.setState({data: e.target.value})}
        className="new-todo shadow-lg p-3 mb-5 bg-white rounded"
        style={mystyle}
        placeholder="What needs to be done?"
      />

      <button className="btn btn-primary btn-sm ml-3">Submit</button>

      <ul className="list-group">
        <li
          className="list-group-item disabled p-3 mb-5 w-50 p-3 mx-auto "
          style={{ width: "200px", fontSize: "24px" }}
        >
          {this.state.data}
        </li>
      </ul>
    </form>
  </Fragment>
);}}

类主页扩展组件{
状态={data:：}；
handleSubmit=（e）=>{
e、 预防默认值（）；
警报（数据）
};
render（）{
常量mystyle={
填充：“16px 16px 16px 60px”，
textAlign：“开始”，
字体大小：“24px”，
fontFamily:“Helvetica Neue”，Helvetica，Arial，无衬线，
宽度：“500px”，
};
返回(
待办事项
this.setState（{data:e.target.value}）
className=“新todo shadow lg p-3 mb-5 bg白色圆形”
style={mystyle}
占位符=“需要做什么？”
/>
提交


{this.state.data}


);}}

像这样尝试：

state = { data: "", FinalDataValue:"" };
 handleChange = (e) => {
e.preventDefault();
this.setState({ data: e.target.value });};


handleSubmit = (e) => {
e.preventDefault();
this.setState({ FinalDataValue:this.state.data });};

在render in列表中，按如下方式编写：

<li
      className="list-group-item disabled p-3 mb-5 w-50 p-3 mx-auto "
      style={{ width: "200px", fontSize: "24px" }}
    >
      {this.state.FinalDataValue}
    </li>

{this.state.FinalDataValue}

您的代码中存在一些问题：

您想在按钮上提交。为此，您需要添加

type=“submit”

上次您在Submit上保存value

onSubmit

，但它没有

e.target.value

，您需要在

onHandleChage

以下是完整代码：

import React, { Component, Fragment } from "react";

class MainPage extends Component {
  state = { data: [], input: "" };
  handleChange = (e) => {
    e.preventDefault();
    this.setState({ input: e.target.value });
  };
  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({ data: [...this.state.data, this.state.input], input: "" });
  };

  render() {
    const mystyle = {
      padding: "16px 16px 16px 60px",
      textAlign: "start",
      fontSize: "24px",
      fontFamily: 'Helvetica Neue", Helvetica, Arial, sans-serif',
      width: "500px"
    };

    return (
      <Fragment>
        <h1 className="display-1 text-center" style={{ color: "#f7c6c6" }}>
          todos
        </h1>
        <form className="todo-form" onSubmit={this.handleSubmit}>
          <input
            type="text"
            onChange={this.handleChange.bind(this)}
            value={this.state.input}
            className="new-todo shadow-lg p-3 mb-5 bg-white rounded"
            style={mystyle}
            placeholder="What needs to be done?"
          />

          <button className="btn btn-primary btn-sm ml-3" type="submit">
            Submit
          </button>

          <ul className="list-group">
            {this.state.data.map((data, i) => {
              return (
                <li
                  className="list-group-item disabled p-3 mb-5 w-50 p-3 mx-auto "
                  style={{ width: "200px", fontSize: "24px" }}
                  key={"todo-" + i}
                >
                  {data}
                </li>
              );
            })}
          </ul>
        </form>
      </Fragment>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <MainPage />
    </div>
  );
}

import React，{Component，Fragment}来自“React”；
类主页扩展组件{
状态={data:[]，输入：'}；
handleChange=（e）=>{
e、 预防默认值（）；
this.setState（{input:e.target.value}）；
};
handleSubmit=（e）=>{
e、 预防默认值（）；
this.setState（{data:[…this.state.data，this.state.input]，输入：“”）；
};
render（）{
常量mystyle={
填充：“16px 16px 16px 60px”，
textAlign：“开始”，
字体大小：“24px”，
fontFamily:“Helvetica Neue”，Helvetica，Arial，无衬线，
宽度：“500px”
};
返回(
待办事项
提交

{this.state.data.map（（数据，i）=>{
返回(

{data}

);
})}

);
}
}
导出默认函数App（）{
返回(
);
}

---

下面是演示：

尝试将type=“submit”添加到您的按钮我尝试过了，效果非常好！非常感谢！

state = { data: [], input: "" };

import React, { Component, Fragment } from "react";

class MainPage extends Component {
  state = { data: [], input: "" };
  handleChange = (e) => {
    e.preventDefault();
    this.setState({ input: e.target.value });
  };
  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({ data: [...this.state.data, this.state.input], input: "" });
  };

  render() {
    const mystyle = {
      padding: "16px 16px 16px 60px",
      textAlign: "start",
      fontSize: "24px",
      fontFamily: 'Helvetica Neue", Helvetica, Arial, sans-serif',
      width: "500px"
    };

    return (
      <Fragment>
        <h1 className="display-1 text-center" style={{ color: "#f7c6c6" }}>
          todos
        </h1>
        <form className="todo-form" onSubmit={this.handleSubmit}>
          <input
            type="text"
            onChange={this.handleChange.bind(this)}
            value={this.state.input}
            className="new-todo shadow-lg p-3 mb-5 bg-white rounded"
            style={mystyle}
            placeholder="What needs to be done?"
          />

          <button className="btn btn-primary btn-sm ml-3" type="submit">
            Submit
          </button>

          <ul className="list-group">
            {this.state.data.map((data, i) => {
              return (
                <li
                  className="list-group-item disabled p-3 mb-5 w-50 p-3 mx-auto "
                  style={{ width: "200px", fontSize: "24px" }}
                  key={"todo-" + i}
                >
                  {data}
                </li>
              );
            })}
          </ul>
        </form>
      </Fragment>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <MainPage />
    </div>
  );
}