如何存储由 dangerouslySetInnerHTML React 设置的输入字段中的值？

Question

如何读取以逗号分隔的所有输入值。 在这里，我尝试使用 ``dangerouslySetInnerHTML`` 设置 html。 html 包含三个输入字段，我如何读取在所有三个输入字段中输入的值。

假设我在第一个输入字段中输入 24，然后在第二个输入字段中输入 12，在第三个输入字段中输入 2。 所以现在我想保存 state 变量逗号分隔的所有值，即

但是handleChange function 不起作用

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

const data = {
  htmltag: `<div><p><input type = 'text' /></p><p><input type = 'text' /></p><p><input type = 'text' /></p></div>`
};

export default function App() {
  const [state, setState] = useState("");


  const handleChange = () => {
    console.log(" Inside of handleChangeOption Scenario");
    const inputs = Array.from(document.querySelectorAll("#my-inputs input"));
    const formDataArray = inputs.map(input => input.value);
    console.log(formDataArray);
    const x = formDataArray.toString();
    console.log(x);
    setState(x);
  };

  useEffect(() => {
    console.log(state);
  }, [state]);


  return (
    <>
      <div
        id="my-inputs"
        onChange={handleChange}
        dangerouslySetInnerHTML={{ __html: data.htmltag }}
      />
      <p>values comma separated: {state} </p>
    </>
  );
}

Answer 1

您需要混合使用查询选择器和本地 state 管理。

单击下面的“运行代码段” 。

 // main.js const { useEffect, useState } = React; const htmlData = { htmltag: `<div><p><input type="text" placeholder="Enter text here" /></p></div>` }; const App = () => { const [data, setData] = useState(''); const onKeyUp = event => { setData(event.target.value); } useEffect(() => { const divId = document.querySelector('#my-inputs'); const input = divId.querySelectorAll('input'); if (input && input.length > 0) { input[0].addEventListener('keyup', onKeyUp); } }, []); return <div><h3>HTML Generated:</h3><div id="my-inputs" dangerouslySetInnerHTML={{ __html: htmlData.htmltag }} /><hr /><h3>Result:</h3><code>{JSON.stringify(data)}</code></div> } ReactDOM.render(<App />, document.getElementById('root'));

 code { padding: 10px; background: #efefef; }

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