时间戳

首页 > 解决方案 > 我是新来的反应，当我点击提交按钮时没有任何反应？

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>
);}}

导出默认主页面；

标签： reactjsonsubmit

解决方案

试试看：

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


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

并在列表中的渲染中写成：

<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>

推荐阅读