为什么我的 React 表单无法在 codesandbox 上运行

Question

我在这里创建了一个简单的表格https://codesandbox.io/s/xenodochial-frog-7squw

它说您在没有 onChange 处理程序的情况下向表单字段提供了 value 属性。这将呈现一个只读字段。如果该字段应该是可变的，请使用 defaultValue.

但是传递了一个 onChange 处理程序，所以我不明白。此外，当我点击提交时页面会重新加载，即使调用了 preventDefault()

谢谢

Answer 1

问题出在这一行：

const { str, handleChange, handleSubmit } = this.state;

handleChange 和 handleSubmit 不是状态的一部分，而是实例方法，所以你可以像这样传递它们：

    return (
      <div className="App">
        <Form str={str} onChange={this.handleChange} onSubmit={this.handleSubmit} />
        <Table />
      </div>
    );

Answer 2

你在第 25 行：

const { str, handleChange, handleSubmit } = this.state;

因此，handleChange 将绑定到 this.state.handleChange，这将是未定义的，因为您所在的州没有属性 handleChange。

您还忘记将道具 name 传递给您的 Table-组件。

我分叉了你的代码并在此处更新了它：https://codesandbox.io/s/modest-meninsky-y1sgh

Answer 3

这是适合您的正确代码：

import React from "react";
import "./styles/styles.css";

import Form from "./components/Form";
import Table from "./components/Table";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { str: "", desc: false };
    console.log(4444);
    this.handleChange = this.handleChange.bind(this); //<-- this binding
  }

  handleSubmit = event => {
    event.preventDefault();
    console.log("submitted");
  };

  handleChange = event => {
    this.setState({ str: event.target.value });
  };

  render() {
    const { str } = this.state; // <-- FIXED THIS
    return (
      <div className="App">
        <Form str={str} onChange={this.handleChange} onSubmit={this.handleSubmit} />
        <Table />
      </div>
    );
  }
}

export default App;

为什么我的 React 表单无法在 codesandbox 上运行

Why is my react form not working on codesandbox

javascript

forms

reactjs

codesandbox