Почему моя форма реагирования не работает с кодами и окном - PullRequest
Новая
       4

Почему моя форма реагирования не работает с кодами и окном

0 голосов
/ 17 января 2020

Я создал простую форму здесь https://codesandbox.io/s/xenodochial-frog-7squw

Там говорится, что вы предоставили value реквизит для поля формы без обработчика onChange. Это сделает поле только для чтения. Если поле должно быть изменяемым, используйте defaultValue.

Но передается обработчик onChange, поэтому я не понимаю. Кроме того, страница перезагружается, когда я нажимаю на кнопку submit, даже если метод protectDefault () называется

Спасибо

Ответы [ 3 ]

3 голосов
/ 17 января 2020

Проблема заключается в следующей строке: 

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

handleChange и handleSubmit не являются частью состояния, но являются методами экземпляра, поэтому вы можете передать их следующим образом: 

    return (
      <div className="App">
        <Form str={str} onChange={this.handleChange} onSubmit={this.handleSubmit} />
        <Table />
      </div>
    );
1 голос
/ 17 января 2020

вот правильный код для вас: 

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;
1 голос
/ 17 января 2020

В строке 25 вы делаете: 

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

Из-за этого handleChange будет привязан к this.state.handleChange, который будет неопределенным, поскольку у вас нет свойства handleChange в вашем штате.

Вы также забыли передать реквизит name вашему Table -компоненту.

Я раздвоил ваш код и обновил его здесь: https://codesandbox.io/s/modest-meninsky-y1sgh

...