反应表单受控组件

Question

我正在尝试制作一个可以动态生成输入字段的表单。 在运行时它会运行，但 react 会引发关于不是受控组件的警告。 我在网上看到的解决方案的任何示例都使用类和构造函数，有没有其他方法可以在不使用类的情况下做到这一点？

import { useState } from 'react';

function Try() {
  const [formFields, setFormFields] = useState([
    { StepNo: '', StepDisc: '' },
  ])

  const handleFormChange = (event, index) => {
    let data = [...formFields];
    data[index][event.target.name] = event.target.value;
    setFormFields(data);
  }

  const submit = (e) => {
    e.preventDefault();
    console.log(formFields)
  }

  const addFields = () => {
    let object = {
      StepNo: '',
      StepDiscs: ''
    }

    setFormFields([...formFields, object])
  }

  const removeFields = (index) => {
    let data = [...formFields];
    data.splice(index, 1)
    setFormFields(data)
  }

  return (
    <div className="">
      <form onSubmit={submit}>
        {formFields.map((form, index) => {
          return (
            <div key={index}>
              <input
                name='StepNo'
                placeholder='StepNo'
                onChange={event => handleFormChange(event, index)}
                value={form.StepNo}
              />
              <input
                name='StepDisc'
                placeholder='StepDisc'
                onChange={event => handleFormChange(event, index)}
                value={form.StepDisc}
              />
              <button onClick={() => removeFields(index)}>Remove</button>
            </div>
          )
        })}
      </form>
      <button onClick={addFields}>Add More..</button>
      <br />
      <button onClick={submit}>Submit</button>
    </div>
  );
}

export default Try;

Answer 1

这与您遇到的错误无关，但我建议您将密钥绑定到唯一密钥，因为它会在您删除项目时产生不可预知的问题。

const addFields = () => {
      // Id should has a unique a id to be used in as a key.
      const id = generateUniqueKey()
      let object = {
        StepNo: '',
        StepDiscs: '',
        id
      }

      setFormFields([...formFields, object])
  }


{formFields.map((form, index) => {
      return (
        <div key={form.id}>
          <input
            name='StepNo'
            placeholder='StepNo'
            onChange={event => handleFormChange(event, index)}
            value={form.StepNo}
          />
          <input
            name='StepDisc'
            placeholder='StepDisc'
            onChange={event => handleFormChange(event, index)}
            value={form.StepDisc}
          />
          <button onClick={() => removeFields(index)}>Remove</button>
        </div>
      )
    })}

Answer 2

当您在添加时初始化新表单数据时，您的代码中只是有错字。 代替

let object = {
  StepNo: '',
  StepDiscs: ''
}

它应该是

let object = {
  StepNo: '',
  StepDisc: ''
}

Answer 3

您需要将StepDiscs更改为StepDisc :-)

  const addFields = () => {
    let object = {
      StepNo: '',
      StepDiscs: ''
    }