javascript - 为什么我的反应表单在代码沙箱上不起作用

Question

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

它说您在value没有处理程序的情况下为表单字段提供了一个道具onChange。这将呈现一个只读字段。如果该字段应该是可变的，请使用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

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;