如何在单击 React 中的按钮时预填充字段？

Question

我正在尝试从已填写的字段中预填充已复制的表单字段。单击“添加字段”按钮时，字段将被复制。但我希望它们使用现有字段中填写的数据进行预填充。

从哪里可以获得输入值？

import './style.css';

export default function App() {
  const [inputFields, setInputFields] = useState([{ name: '', age: '' }]);

  const addFields = (e) => {
    e.preventDefault();

    let newField = { name: "", age: '' };
    setInputFields([...inputFields, newField]);
  };

  const handleFormChange = (index, e) => {
    let data=[...inputFields];
    data[index][e.target.name]=[e.target.value];
    setInputFields(data);
  }

  return (
    <div>
      <form>
        {inputFields.map((input, index) => {
          return (
            <div key={index}>
              <input
                type="text"
                name="name"
                placeholder="Enter name"
                value={input.name}
                onChange={(e)=>handleFormChange(index, e)}
              />
              <input
                type="number"
                name="age"
                placeholder="Enter Age"
                value={input.age}
                onChange={(e)=>handleFormChange(index, e)}
              />
              <br />
              <br />
            </div>
          );
        })}
        <button onClick={addFields}>Add Field</button>
        <br />
      </form>
    </div>
  );
}```

Answer 1

您必须在输入字段上设置 value 属性才能填充，例如：

<input
  value={input.name}
  type="text"
  name="name"
  placeholder="Enter name"
/>

Answer 2

您需要使用 onChange 处理程序跟踪 input 中的更改。

此外，您没有在任何地方设置最后一个输入字段的值以便能够复制它们。下面的代码可能会像您预期的那样工作：

const { useState } = React;

function App() {
  const [inputFields, setInputFields] = useState([{ name: '', age: '' }]);

  const addFields = (e) => {
    e.preventDefault();
    const temp = inputFields.slice()
    , length = temp.length - 1
    , { name, age } = temp[length]
    
    // Set value from last input into the new field
    let newField = { name, age }
    setInputFields([...temp, newField])
  }
  , handleChange = (index, event) => {
    const temp = inputFields.slice() // Make a copy of the input array first.
    inputFields[index][event.target.name] = event.target.value // Update it with the modified values.
    setInputFields(temp) // Update the state.
  };

  return (
    <div>
      <form>
        {inputFields.map((input, index) => {
          return (
            <div key={index}>
              <input
                onChange={e => handleChange(index, e)}
                value={input.name}
                type="text"
                name="name"
                placeholder="Enter name"
              />
              <input
                onChange={e => handleChange(index, e)}
                value={input.age}
                type="number"
                name="age"
                placeholder="Enter Age"
              />
              <br />
              <br />
            </div>
          );
        })}
        <button onClick={addFields}>Add Field</button>
        <br />
      </form>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

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

如何在单击 React 中的按钮时预填充字段？

How to pre-populate fields on click of a button in react?

javascript

forms

reactjs

react-hooks