[英]How to store values from input field that is set by dangerouslySetInnerHTML React?
如何讀取以逗號分隔的所有輸入值。 在這里,我嘗試使用 ``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>
</>
);
}
您需要混合使用查詢選擇器和本地 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.