FormData 在react中返回表单提交的空数据答案

【问题标题】：FormData Returns empty data on form submission in reactFormData 在react中返回表单提交的空数据
【发布时间】：2019-10-06 11:25:17
【问题描述】：

我试图在提交表单时使用new FormData() 构造函数获取表单数据键值对对象。但它总是返回空数据。

我已经尝试event.persist() 来避免反应事件池，但没有任何效果


export default class Test extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const target = event.target;
    const data = new FormData(target);
    console.log(data)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

        <button>Send data!</button>
      </form>
    );
  }
}

我期待一个包含以下格式的表单数据的对象

{ "username": "Value" }

【问题讨论】：

FormData 不提供这样的属性。尝试console.log(...data) 或FormData 提供的修改/访问数据的方法。

标签： javascript reactjs dom dom-events form-data

【解决方案1】：

我认为您需要通过循环来获取它。试试这个

  var formData = new FormData(target);

   for (var [key, value] of formData.entries()) { 
   console.log(key, value);
  }

希望它有效。

【讨论】：

【解决方案2】：

handleSubmit 应该是这样的。

handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);
    fetch('my-api', {
      method: 'POST',
      body: data,
    });
  }

表单提交后，在网络选项卡中，您将找到带有键值的表单数据。

如果你想访问单个值，

const username = data.get('username');

【讨论】：

【解决方案3】：

就我而言，我不得不使用这个通用代码 sn-p

    const form = event.target;
    const data = {};
    for (let i=0; i < form.elements.length; i++) {
        const elem = form.elements[i];
        data[elem.name] = elem.value
    }

我不知道这种行为的原因，但可能是因为表单内的输入不再是 DOM 的一部分

【讨论】：

【解决方案4】：

其中一个如果你使用 React，只需使用 htmlType 标签

<Form.Item>
  <Button type="primary" htmlType="submit" />
    Submit action
  </Button>
</Form.Item>

【讨论】：