reactjs - 如何使用 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)}
      />
    );
  });

添加元组件

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>
  );
};

我感谢任何解决此问题的尝试。谢谢！

标签： reactjsreact-hooks

Answer 1

尝试删除|| ''您的输入值。它们的价值应该始终与您的状态相关联（应该是''当您添加新元时）。