如何从React函数访问输入元素

debugcn 发表于 Dev

史蒂文·泰格曼

我目前有一个根据当前用户拥有的“活动”数量自动生成的表单。每个活动都有一个名称和一个值。我的目标是将这些值提交给后端以更新它们。但是我不知道如何引用这些输入。我试图阅读有关使用“ ref”的信息，但它们以{current：null}返回

这是自动生成的列表（请使用占位符文本）

当我检查控制台时，这是从引用中找到的内容：

这是我的代码：

import React, { useEffect } from "react";
import { useDispatch, useStore } from "react-redux";
import { connect } from "react-redux";
import * as actions from "../store/actions/patientSide";

export function ActivityTemplates() {
  const dispatch = useDispatch();
  const store = useStore();
  const ref = React.createRef();

  useEffect(() => {
    // Update the document title using the browser API
    dispatch(actions.getTodaysActivityTemplates());
  }, []);
  
  const activities = store.getState().patientSide.todays_activities;

  const listedStuff = activities.map((activity) => (
    <div>
      {activity.activity_name}
      <label for="value"> Value: </label>
      <input
        type="number"
        id="value"
        defaultValue={activity.value}
        min="0"
        max="10"
      ></input>
    </div>
  ));
  
  const saveActivities = () => {
    var inputs = ref;

    console.log(inputs);
    // Insert code to run the call to the backend
  };

  return (
    <div>
      <h1> Activity Templates</h1>
      <form id="form" onSubmit={saveActivities()} ref={ref}>
        {listedStuff}
        <input type="submit" name="save" />
      </form>
    </div>
  );
}

export default ActivityTemplates;

我对React和JS还是很陌生，说实话我对自己的工作几乎一无所知，但是如果有人可以指出正确的方向，那真是太棒了！

编辑：睡在上面之后，我意识到我只是想强制对HTML做出反应。我相信我应该改用React Form Hook，并从头开始正确地做。

Aliasger Ujjainwala

  <form onSubmit={handleOnSubmit}>
        <label>User Name</label>
        <input type="text"  name="username" /><br/>
        <label>Password</label>
        <input type="password"  name="password" /><br/>
        <input type="submit" value="Submit" />
      </form>



 const handleOnSubmit = (event) => {
    const formData = new FormData(event.target);
    const formDetails = {};

    event.preventDefault();
    for (let entry of formData.entries()) {
      formDetails[entry[0]] = entry[1];
    };
    console.log("formDetails", formDetails);
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。