如何维护通过React Hooks在用户单击时动态添加的受控输入

Question

我有一个表单组件，您可以在其中单击添加多个输入。我正在使用useState存储来自所有输入的数据，但是问题是我收到一条消息，提示我的输入不受控制

状态数据结构

const [formData, setFormData] = useState({
    title: '',
    titleNum: '',
    meta: [
      {
        content: '',
        contentNum: '',
        details: '',
        tags: ''
      }
    ]
  });

想法是通过表单将多个对象动态添加到元数组

onChange事件已添加到输入

const { title, titleNum, meta } = formData;

  const handleMainChange = e => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubChange = (e, index) => {
    const { name, value } = e.target;
    let metaContent = [...meta];
    metaContent[index] = { ...metaContent[index], [name]: value };
    setFormData({ ...formData, meta: metaContent });
  };

添加和删除输入

const handleAddInput = () => {
    setFormData(prevState => ({
      meta: [
        ...prevState.meta,
        { content: '', contentNum: '', details: '', tags: '' }
      ]
    }));
  };

  const handleRemove = index => {
    let metaContent = [...meta];
    metaContent.splice(index, 1);
    setFormData({ meta: metaContent });
  };

提交并遍历所有META

const onFormSubmit = e => {
    e.preventDefault();
    createAccount(formData, history);
  };

  const renderList = meta.map((item, index) => {
    console.log(item);
    return (
      <AddMeta
        key={index}
        index={index}
        meta={item}
        handleChange={e => handleSubChange(e, index)}
        handleRemove={() => handleRemove(index)}
      />
    );
  });

AddMeta组件

const AddMeta = ({ index, meta, handleChange, handleRemove }) => {
  return (
    <Fragment>
      <div className='row valign-wrapper'>
        <div className='col s3'>
          <h5 className='indigo-text text-lighten-1'>Add Meta - {index + 1}</h5>
        </div>
        <div className='col s9'>
          <button onClick={() => handleRemove(index)} className='btn red'>
            Remove Meta Content
          </button>
        </div>
      </div>
      <div className='form-group'>
        <input
          type='text'
          placeholder='Content Text'
          name='content'
          value={meta.content || ''}
          onChange={e => handleChange(e, index)}
          autoComplete='off'
        />
      </div>
      <div className='form-group'>
        <input
          type='text'
          placeholder='Content Number'
          name='contentNum'
          value={meta.contentNum || ''}
          onChange={e => handleChange(e, index)}
          autoComplete='off'
        />
      </div>
      <div className='form-group'>
        <textarea
          className='materialize-textarea'
          type='text'
          placeholder='Details'
          name='details'
          value={meta.details || ''}
          onChange={e => handleChange(e, index)}
          autoComplete='off'
        />
      </div>
      <div className='form-group'>
        <input
          type='text'
          placeholder='Tags'
          name='tags'
          value={meta.tags || ''}
          onChange={e => handleChange(e, index)}
          autoComplete='off'
        />
      </div>
    </Fragment>
  );
};

感谢您为解决此问题所做的任何尝试。 谢谢！

Answer 1

尝试删除输入值上的|| ''。它们的值应始终与您的状态相关联（添加新的元数据时应为''）。