如何使用 ReactJs 中的值访问键？

Question

我正在学习 Udemy 的 reactJS 教程，我正在自己尝试一些东西。

项目： 这是一个简单的项目，我可以在其中添加或删除目标

我想补充的是，我想在单击提交（添加目标）按钮时清除输入文本字段。我能做到，但我认为有一个问题。

完整代码

import React, { useState } from "react";

import Button from "../../UI/Button/Button";
import style from "./CourseInput.module.css";

const CourseInput = (props) => {
  const [enteredValue, setEnteredValue] = useState("");
  const [isValid, setIsValid] = useState(true);

  const goalInputChangeHandler = (event) => {
    setEnteredValue(event.target.value);
    if (enteredValue.trim().length > 0) {
      setIsValid(true);
    }
    console.log("=>" + enteredValue);
  };

  const formSubmitHandler = (event) => {
    event.preventDefault();
    if (enteredValue.trim().length === 0) {
      setIsValid(false);
      return;
    }
    props.onAddGoal(enteredValue);
    // empty the inputbar and reset state (enteredValue)
    console.log(event);
    event.target[0].value = ""; // the main 
    setEnteredValue("");       // two lines.
  };

  return (
    <form onSubmit={formSubmitHandler}>
      <div className={`${style["form-control"]} ${!isValid && style.invalid}`}>
        <label>Course Goal</label>
        <input type="text" onChange={goalInputChangeHandler} />
      </div>
      <Button type="submit">Add Goal</Button>
    </form>
  );
};

export default CourseInput;

正如您在上面的代码中看到的，我正在通过表单事件访问输入字段。

我通过我认为是硬编码的索引号访问输入字段。将来如果表单元素的数量增加/减少，索引号可能会改变。所以我想做的是在不使用索引的情况下访问输入值。这可能吗？（我知道是），我该怎么做？

Answer 1

提交表单后将value={enteredValue}添加到输入字段并将其设置为空字符串就足够了。 此外，如果您有任何其他input 字段，您可以尝试event.target.reset()。

所以试试这个：

import React, { useState } from "react";
// import styled from "styled-components";

import Button from "../../UI/Button/Button";
import style from "./CourseInput.module.css";



const CourseInput = (props) => {
  const [enteredValue, setEnteredValue] = useState("");
  const [isValid, setIsValid] = useState(true);

  const goalInputChangeHandler = (event) => {
    setEnteredValue(event.target.value);
    if (enteredValue.trim().length > 0) {
      setIsValid(true);
    }
    console.log("=>" + enteredValue);
  };

  const formSubmitHandler = (event) => {
    event.preventDefault();
    if (enteredValue.trim().length === 0) {
      setIsValid(false);
      return;
    }
    props.onAddGoal(enteredValue);
    // empty the inputbar and reset state (enteredValue)
    setEnteredValue("");
    event.target.reset();
  };

  return (
    <form onSubmit={formSubmitHandler}>
      <div className={`${style["form-control"]} ${!isValid && style.invalid}`}>
        <label>Course Goal</label>
        <input type="text" value={enteredValue} onChange={goalInputChangeHandler} />
      </div>
      <Button type="submit">Add Goal</Button>
    </form>
  );
};

export default CourseInput;

Answer 2

如果您正在使用表单的 onSubmit 操作并有 onSubmit 事件，那么您可以直接重置表单。

const formSubmitHandler = (event) => {
  event.preventDefault();
  if (enteredValue.trim().length === 0) {
    setIsValid(false);
    return;
  }
  props.onAddGoal(enteredValue);
  setEnteredValue("");
  event.target.reset(); // <-- calls form's reset action
};

const CourseInput = (props) => {
  const [enteredValue, setEnteredValue] = React.useState("");
  const [isValid, setIsValid] = React.useState(true);

  const goalInputChangeHandler = (event) => {
    setEnteredValue(event.target.value);
    if (enteredValue.trim().length > 0) {
      setIsValid(true);
    }
  };

  const formSubmitHandler = (event) => {
    event.preventDefault();
    if (!enteredValue.trim().length) {
      setIsValid(false);
      return;
    }
    props.onAddGoal(enteredValue);
    setEnteredValue("");
    event.target.reset();
  };

  return (
    <form onSubmit={formSubmitHandler}>
      <div>
        <label>Course Goal</label>
        <input type="text" onChange={goalInputChangeHandler} />
      </div>
      <button type="submit">Add Goal</button>
    </form>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <CourseInput onAddGoal={(val) => console.log(val)} />,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />

Answer 3

您可以使用Refs 来实现此目的：

函数 MyComponent() {

const textInput = React.useRef(null);


const formSubmitHandler = (event) => {
    event.preventDefault();
    if (enteredValue.trim().length === 0) {
      setIsValid(false);
      return;
    }
    props.onAddGoal(enteredValue);
    // empty the inputbar and reset state (enteredValue)
    console.log(event);
    textInput.current.value = "";
  };

  // other code

 return    <input type="text" onChange=        {goalInputChangeHandler} ref={textInput} /> 

}