我们如何从反应钩子中的多个动态文本区域获取输入文本？

Question

我希望在从下拉框中选择人员后动态创建在下面的输入 textarea 中输入的文本。想要将输出转换为 json 格式：现在它从最后显示的文本区域获取值。有人可以建议吗？请在下方提供示例 codesandbox link

Expected output:

[ 
{name:"Bader", reason:"Good news, please add the some data"},
{name:"Crots", reason:"Great person"},
{name:"Dan", reason:"Simple look"}
]

App.js

import React, { useRef, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { Link, useHistory } from "react-router-dom";
import Multiselect from "multiselect-react-dropdown";

const options = [
  { key: "Aaron", id: 1 },
  { key: "Bader", id: 2 },
  { key: "Crots", id: 3 },
  { key: "Dan", id: 4 },
  { key: "Elep", id: 5 },
  { key: "Pal", id: 6 },
  { key: "Quilt", id: 7 }
];

const App = () => {
  const maxOptions = 3;
  const [selectedOption, setSelectedOption] = useState([]);
  const [nomRegister, setNomRegister] = useState([]);
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors }
  } = useForm();

     
  const handleTypeSelect = (e) => {
    const copy = [...selectedOption];
    copy.push(e);
    setSelectedOption(copy);
  };

  const handleTypeRemove = (e) => {
    const copy = [...selectedOption];
    let index = copy.indexOf(e);
    copy.splice(index, 1);
    setSelectedOption(copy);
  };

  const sendNomination = () => {
    console.log("Doesn't print all, what the heck: " + nomRegister);
  };

  return (
    <div className="App">
      <h1>Person selection</h1>
      <div className="nomineeSelectBox">
        <div id="dialog2" className="triangle_down1"></div>
        <div className="arrowdown">
          <Multiselect
            onSelect={handleTypeSelect}
            onRemove={handleTypeRemove}
            options={selectedOption.length + 1 === maxOptions ? [] : options}
            displayValue="key"
            showCheckbox={true}
            emptyRecordMsg={"Maximum nominees selected !"}
          />
        </div>
      </div>
      <form onSubmit={handleSubmit(sendNomination)}>
        <div className="nomineesSelectedList">
          <h3>Selected Persons</h3>
          {selectedOption.map((x, i) => (
            <div key={i}>
              <div className="row eachrecord">
                <div className="column">
                  <label className="nomlabel">
                    {x[i].key} <b>>></b>
                  </label>
                </div>
                <input
                  required
                  type="textarea"
                  key={i}
                  id={i}
                  name={x[i].key}
                  className="nomineechoosed"
                  onChange={(e) => setNomRegister(e.target.value)}
                />
              </div>
            </div>
          ))}
          <div className="row">
            <div className="buttongroup">
              <input id="Submit" type="submit" value="Submit" />
              <input id="Cancel" type="button" value="Cancel" />
            </div>
          </div>
        </div>
      </form>
    </div>
  );
};

export default App;

Codesandbox link:

https://codesandbox.io/s/elastic-elbakyan-uqpzy?file=/src/App.js

Answer 1

几经修改，找到了解决方案

import React, { useRef, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { Link, useHistory } from "react-router-dom";
import Multiselect from "multiselect-react-dropdown";

const options = [
  { key: "Aaron", id: 1 },
  { key: "Bader", id: 2 },
  { key: "Crots", id: 3 },
  { key: "Dan", id: 4 },
  { key: "Elep", id: 5 },
  { key: "Pal", id: 6 },
  { key: "Quilt", id: 7 }
];

const App = () => {
  const maxOptions = 3;
  const [selectedOption, setSelectedOption] = useState([]);
  const [nomRegister, setNomRegister] = useState([{}]);
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors }
  } = useForm();

  // const onChange = (e) =>{
  //     e.persist();
  //     setNomRegister({ ...nomRegister, [e.target.id]: e.target.value });
  // }

  const handleTypeSelect = (e) => {
    const copy = [...selectedOption];
    copy.push(e);
    setSelectedOption(copy);
  };

  const handleTypeRemove = (e) => {
    const copy = [...selectedOption];
    console.log(copy);
    let index = copy.indexOf(e);
    copy.splice(index, 1);
    setSelectedOption(copy);
    // immutating state (best practice)
    const updateList = nomRegister.map((item) => {
      return { ...item };
    });
    //delete the specific array case depends on the id
    updateList.splice(index, 1);
    setNomRegister(updateList);
  };

  const sendNomination = () => {
    console.log(
      "Doesn't print all, what the heck: " + JSON.stringify(nomRegister) // i did JSON.stringify just to see the console
    );
  };
  const handleChange = (e, i) => {
    const { name, value } = e.target;
    // immutating state (best practice)
    const updateList = nomRegister.map((item) => {
      return { ...item };
    });
    //change the specific array case depends on the id
    updateList[i] = { ...updateList[i], name: name, reason: value };
    setNomRegister(updateList);
  };
  return (
    <div className="App">
      <h1>Person selection</h1>
      <div className="nomineeSelectBox">
        <div id="dialog2" className="triangle_down1"></div>
        <div className="arrowdown">
          <Multiselect
            onSelect={handleTypeSelect}
            onRemove={handleTypeRemove}
            options={selectedOption.length + 1 === maxOptions ? [] : options}
            displayValue="key"
            showCheckbox={true}
            emptyRecordMsg={"Maximum nominees selected !"}
          />
        </div>
      </div>
      <form onSubmit={handleSubmit(sendNomination)}>
        <div className="nomineesSelectedList">
          <h3>Selected Persons</h3>
          {selectedOption.map((x, i) => (
            <div key={i}>
              <div className="row eachrecord">
                <div className="column">
                  <label className="nomlabel">
                    {x[i].key} <b>>></b>
                  </label>
                </div>
                <input
                  required
                  type="textarea"
                  key={i}
                  id={i}
                  name={x[i].key}
                  className="nomineechoosed"
                  onChange={(e) => handleChange(e, i)}
                />
              </div>
            </div>
          ))}
          <div className="row">
            <div className="buttongroup">
              <input id="Submit" type="submit" value="Submit" />
              <input id="Cancel" type="button" value="Cancel" />
            </div>
          </div>
        </div>
      </form>
    </div>
  );
};

export default App;

检查Codesandbox

我们如何从反应钩子中的多个动态文本区域获取输入文本？

How can we get the input text from multiple dynamic textareas in react hook?

reactjs

react-hooks

react-hook-form