反应动态表单输入
React dynamic form input
我有一个带有动态输入字段的 React 表单,用户可以添加和删除输入字段。当我提交表单时,我将每个输入的值记录在一个数组中。问题是我无法连续输入。当我输入输入时,我只能输入一个字符并且它会聚焦。我该如何解决?
App.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [fields, setFields] = useState([""]);
function handleChange(i, event) {
const values = [...fields];
values[i] = event.target.value;
setFields(values);
}
function handleAdd() {
const values = [...fields];
values.push("");
setFields(values);
}
function handleRemove(i) {
const values = [...fields];
values.splice(i, 1);
setFields(values);
}
function submitHandler(event) {
event.preventDefault();
console.log(fields);
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<form onSubmit={submitHandler}>
<button type="button" onClick={() => handleAdd()}>
Add Input
</button>
{fields.map((field, idx) => {
return (
<div key={`${field}-${idx}`}>
<input
type="text"
placeholder="Enter text"
value={field || ""}
onChange={(e) => handleChange(idx, e)}
/>
<button type="button" onClick={() => handleRemove(idx)}>
X
</button>
</div>
);
})}
<button className="margin-top" type="submit">
Submit
</button>
</form>
</div>
);
}
export default App;
用这个替换你的代码
<div key={`${"asdf"}-${idx}`}>
<input
type="text"
placeholder="Enter text"
value={field || ""}
onChange={(e) => handleChange(idx, e)}
/>
<button type="button" onClick={() => handleRemove(idx)}>
X
</button>
</div>
我用过第三方debounce,你可以随便选
代码
import React, { useState } from "react";
import AwesomeDebouncePromise from "awesome-debounce-promise";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [fields, setFields] = useState([""]);
function handleChange(i, event) {
const values = [...fields];
values[i] = event.target.value;
setFields(values);
}
function handleAdd() {
const values = [...fields];
values.push("");
setFields(values);
}
function handleRemove(i) {
const values = [...fields];
values.splice(i, 1);
setFields(values);
}
const searchAPIDebounced = AwesomeDebouncePromise((event) => {
console.log(fields);
}, 100);
const submitHandler = async (event) => {
event.preventDefault();
const result = await searchAPIDebounced(event);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<form onSubmit={submitHandler}>
<button type="button" onClick={() => handleAdd()}>
Add Input
</button>
{fields.map((field, idx) => {
return (
<div key={`${idx}`}>
<input
type="text"
placeholder="Enter text"
value={field || ""}
onChange={(e) => handleChange(idx, e)}
/>
<button type="button" onClick={() => handleRemove(idx)}>
X
</button>
</div>
);
})}
<button className="margin-top" type="submit">
Submit
</button>
</form>
</div>
);
}
export default App;
我有一个带有动态输入字段的 React 表单,用户可以添加和删除输入字段。当我提交表单时,我将每个输入的值记录在一个数组中。问题是我无法连续输入。当我输入输入时,我只能输入一个字符并且它会聚焦。我该如何解决?
App.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [fields, setFields] = useState([""]);
function handleChange(i, event) {
const values = [...fields];
values[i] = event.target.value;
setFields(values);
}
function handleAdd() {
const values = [...fields];
values.push("");
setFields(values);
}
function handleRemove(i) {
const values = [...fields];
values.splice(i, 1);
setFields(values);
}
function submitHandler(event) {
event.preventDefault();
console.log(fields);
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<form onSubmit={submitHandler}>
<button type="button" onClick={() => handleAdd()}>
Add Input
</button>
{fields.map((field, idx) => {
return (
<div key={`${field}-${idx}`}>
<input
type="text"
placeholder="Enter text"
value={field || ""}
onChange={(e) => handleChange(idx, e)}
/>
<button type="button" onClick={() => handleRemove(idx)}>
X
</button>
</div>
);
})}
<button className="margin-top" type="submit">
Submit
</button>
</form>
</div>
);
}
export default App;
用这个替换你的代码
<div key={`${"asdf"}-${idx}`}>
<input
type="text"
placeholder="Enter text"
value={field || ""}
onChange={(e) => handleChange(idx, e)}
/>
<button type="button" onClick={() => handleRemove(idx)}>
X
</button>
</div>
我用过第三方debounce,你可以随便选
代码
import React, { useState } from "react";
import AwesomeDebouncePromise from "awesome-debounce-promise";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [fields, setFields] = useState([""]);
function handleChange(i, event) {
const values = [...fields];
values[i] = event.target.value;
setFields(values);
}
function handleAdd() {
const values = [...fields];
values.push("");
setFields(values);
}
function handleRemove(i) {
const values = [...fields];
values.splice(i, 1);
setFields(values);
}
const searchAPIDebounced = AwesomeDebouncePromise((event) => {
console.log(fields);
}, 100);
const submitHandler = async (event) => {
event.preventDefault();
const result = await searchAPIDebounced(event);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<form onSubmit={submitHandler}>
<button type="button" onClick={() => handleAdd()}>
Add Input
</button>
{fields.map((field, idx) => {
return (
<div key={`${idx}`}>
<input
type="text"
placeholder="Enter text"
value={field || ""}
onChange={(e) => handleChange(idx, e)}
/>
<button type="button" onClick={() => handleRemove(idx)}>
X
</button>
</div>
);
})}
<button className="margin-top" type="submit">
Submit
</button>
</form>
</div>
);
}
export default App;