如何从文本字段的映射功能中获取所需文本字段的值？答案

【问题标题】：How to get value of desired textfield from map function of textfields?如何从文本字段的映射功能中获取所需文本字段的值？
【发布时间】：2022-01-12 23:35:09
【问题描述】：

这些是具有相同文本字段的不同帖子，即 comment 与 same useState 我想获得所需文本字段的值，而其他文本字段不应获得其值。它就像来自 facebook 的帖子，但我不明白该怎么做。

const PostTemplate = (props) => {
  const { data, user, MakeComment } = props;
  const [comment, setComment] = React.useState("");

  const HandleSubmit = (event) => {
    // event.preventDefault();
    //console.log(comment);
    console.log the value that gives the value of that particular textfield


  };

  return (
    <div>
       {data.map((item) => {
        return (
          <div className={classes.HomeCard} key={item._id}>
            <div className="card-image">
              <img src={item.photo} />
            </div>
            <div className="card-content">
              <h6>{item.title}</h6>
              <p>{item.body}</p>

              {item.comments.map((record) => {
                return (
                  <h6 key={record._id}>
                    <span style={{ fontWeight: "500" }}>
                      {record.postedBy.name}
                    </span>{" "}
                    {record.text}
                  </h6>
                );
              })}
              <TextField value={comment} onChange = {(e)=>setComment(e.target.value)} />
              <Button onClick={HandleSubmit}>Submit</Button>
            </div>
          </div>
        );
      })} 

          
        );
      })}
    </div>
  );
};
export default PostTemplate;

【问题讨论】：

如果你想要所有字段的值，你应该将你的 cmets 包装在一个表单标签中。如果您只需要评论字段值，则您已经将其置于评论状态。

标签： javascript reactjs forms material-ui

【解决方案1】：

我为输入创建了一个状态，它是一个对象数组，每个对象都有一个 id 和 text 属性，当其中一个输入发生变化时，我们在 CommentInputOnchange 函数中获取它的 id 和值并更新状态，即函数，我找到一个具有相同 Id 的对象，然后更新文本属性，最后我更新状态

import { useState } from "react";

const data = [
  {
    _id: 1,
    photo: "",
    title: "title1",
    body: "body1",
    comments: [{ _id: 1, postedBy: { name: "a" }, text: "abc" }]
  },
  {
    _id: 2,
    photo: "",
    title: "title2",
    body: "body2",
    comments: []
  }
];

//Fill Comment Input State Based on Data, Push an object with id and text to that
const initialCommentInputValues = [];
data.forEach((d) => {
  initialCommentInputValues.push({ _id: d._id, text: "" });
});

export default function App() {
  const [commentInputValues, setCommentInputValues] = useState(
    initialCommentInputValues
  );

  const HandleSubmit = (event) => {};

  //each input send its id and value here and we change the state
  const commentInputOnChange = (id, value) => {
    console.log({ id, value });
    const newCommentInputValues = [...commentInputValues];
    const inputValue = newCommentInputValues.find((x) => x._id === id);
    inputValue.text = value;
    setCommentInputValues(newCommentInputValues);
  };

  return (
    <div>
      {data.map((item) => {
        return (
          <div key={item._id}>
            <div className="card-image">
              <img src={item.photo} />
            </div>
            <div className="card-content">
              <h6>{item.title}</h6>
              <p>{item.body}</p>

              {item.comments.map((record) => {
                return (
                  <h6 key={record._id}>
                    <span style={{ fontWeight: "500" }}>
                      {record.postedBy.name}
                    </span>{" "}
                    {record.text}
                  </h6>
                );
              })}
              <input
                value={commentInputValues.find((x) => x._id === item._id).text}
                onChange={(e) => commentInputOnChange(item._id, e.target.value)}
              ></input>
              <button onClick={HandleSubmit}>Submit</button>
            </div>
          </div>
        );
      })}
    </div>
  );
}

【讨论】：