Question

我是React JS的新手，现在我正在尝试学习函数组件中的钩子。这是我的代码：

应用

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

import AddPlayerForm from "./components/AddPlayerForm";

const App = () => {
  const [player, setPlayer] = useState("");
  const handleAddPlayer = (player) => {
    setPlayer(player);
  };

  return (
    <div className="container">
      <h3>Player: {player}</h3>
      <AddPlayerForm addPlayer={handleAddPlayer} />
    </div>
  );
};

export default App;

表格：

import React, { useState } from "react";

const AddPlayerForm = (props) => {
  const [value, setValue] = useState("");

  const handleValueChange = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    props.addPlayer(e.target.value);
    e.target.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <input
          onChange={handleValueChange}
          value={value}
          className="form-control form-control-lg"
          type="text"
          placeholder="Add player"
        />
      </div>
      <button className="btn btn-primary" type="submit">
        Submit
      </button>
    </form>
  );
};

export default AddPlayerForm;

因此，我尝试提供从from到App组件的提交值，但是由于某些原因，单击Submit之后<h3>Player: {player}</h3>中没有任何变化。您能告诉我我的代码在哪里出错吗？

Answer 1

您应提交州的value：

const handleSubmit = (e) => {
  e.preventDefault();
  console.log(e.target.value); // undefined

  // value from useState
  props.addPlayer(value);
};

此外，e.target.reset()不起作用，因为您的input组件是受控组件（使用value={value}），因此，要进行重置，您需要重置状态：

const handleSubmit = (e) => {
  e.preventDefault();
  console.log(e.target.value); // undefined

  // value from useState
  props.addPlayer(value);

  // not e.target.reset()
  setValue('');
};

请参见Controlled vs Uncontrolled components

Answer 2

尝试一下。将您所在州的value传递到addPlayer

 const handleSubmit = (e) => {
    e.preventDefault();
    props.addPlayer(value);
    e.target.reset();
  };

Answer 3

在AddPlayerForm组件中，每次输入更改时，您都使用useState钩子将输入的值存储在value中。因此，在handleSubmit方法中，您可以传递e.target.value而不是传递value。

此外，如果您要在提交后重设输入，可以致电setValue("")。

import React, { useState } from "react";

const AddPlayerForm = (props) => {
  const [value, setValue] = useState("");

  const handleValueChange = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    props.addPlayer(value);
    setValue(""); // To reset the input
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <input
          onChange={handleValueChange}
          value={value}
          className="form-control form-control-lg"
          type="text"
          placeholder="Add player"
        />
      </div>
      <button className="btn btn-primary" type="submit">
        Submit
      </button>
    </form>
  );
};

export default AddPlayerForm;

React文档中有一节处理表单。 https://reactjs.org/docs/forms.html

此外，这篇关于不受控制的组件的文章可能会有所帮助。 https://reactjs.org/docs/uncontrolled-components.html

Answer 4

您需要将handleSubmit函数更改为：

const handleSubmit = (e) => {
e.preventDefault();
props.addPlayer(value);
e.target.reset();

};

因为变量值包含播放器的名称。

提交表单后setState不起作用

4 个答案: