从受控形式到钩子

Question

你好，这是我的第一个问题，我只是 Reactjs 的初学者，我需要你的解释，谢谢

代码是关于使用“this.state”在-class 组件中编写的受控表单。

我正在尝试使用钩子将它变成一个功能组件，结果相同 1- onSubmit 在屏幕上呈现文本 2- 将输入重置为“”

问题是没有结果写入，而是我在搜索中得到了 [object, Object]

这是代码

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    event.preventDefault()
    this.setState({
      submit: this.state.input,
      input:''
    })
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
        <input type='text' 
          value={this.state.input} 
          onChange={this.handleChange}
          />
          <button type='submit'>Submit!</button>
        </form>
        <h1>{this.state.submit}</h1>
      </div>
    );
  }
}

The code at codesandbox for fast access 请问你能告诉我如何解决吗？ 谢谢

Answer 1

这是您需要的https://codesandbox.io/s/new-leftpad-1n0yy，您可以将当前的 MyForm 与 Form 进行比较以了解差异，但我建议更深入地查看文档

Answer 2

这是 Artem Matiushenko 的回答，他使用 useState、useCallback[=22= 添加了第二个组件]

现在我们可以比较两种类型的受控形式

import React, { useCallback, useState } from "react";
import "./styles.css";

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      submit: "",
    };
  }
  handleChange = (event) => {
    this.setState({
      input: event.target.value,
    });
  };
  handleSubmit = (event) => {
    event.preventDefault();
    this.setState({
      submit: this.state.input,
      input: "",
    });
  };
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.input}
            onChange={this.handleChange}
          />
          <button type="submit">Submit!</button>
        </form>
        <h1>{this.state.submit}</h1>
      </div>
    );
  }
}
//using hooks------->
function Form() {
  const [value, setValue] = useState("");
  const [submitedValue, setSubmitedValue] = useState();

  const handleOnChange = useCallback(({ target }) => {
    setValue(target.value);
  }, []);

  const handleOnSubmit = useCallback(
    (event) => {
      event.preventDefault();
      setSubmitedValue(value);
      setValue("");
    },
    [value]
  );

  return (
    <div>
      <form onSubmit={handleOnSubmit}>
        <input type="text" value={value} onChange={handleOnChange} />
        <button type="submit">Submit!</button>
      </form>
      <h1>{submitedValue}</h1>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>Class Component Form</h1>
      <h2>controlled form</h2>
      <MyForm />
      <Form />
    </div>
  );
}

这是我了解 useSate 工作原理后的结果

const MyForm = () => {
  const [input, setInput] = useState("");
  const [submitText, setSubmitText] = useState("");

  const handleChange = (event) => {setInput(event.target.value)};

  const handleSubmit = (event) => {
    event.preventDefault();
    setSubmitText(input);
    setInput("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={input} onChange={handleChange} />
        <button type="submit">Submit!</button>
      </form>
      <h1>{submitText}</h1>
    </div>
  );
};