如何将数组数据从表单传递到状态?

时间:2019-07-16 13:55:29

标签: javascript reactjs

我是React JS的新手 我处于这种状态:

state = {
    protocol_number: this.year.toString()
        +Math.floor(Math.pow(10,5)
        +Math.random()*Math.pow(9, 6)).toString(),
    ticket_date: this.full_date,
    company_name: '',
    nameError: '',
    trading_name: '',
    request_type: '',
    ticket_description: '',
    isOpen: false,
    image: null,
    product_list: []
};

这是通过以下方式将其提交给API:

handleSubmit = async e => {
    e.preventDefault();

    this.setState({ addItemModal: false });

    const data = new FormData();

    data.append('protocol_number', this.state.protocol_number);
    data.append('ticket_date', this.state.ticket_date);
    data.append('company_name', this.state.company_name);
    data.append('trading_name', this.state.trading_name);
    data.append('request_type', this.state.request_type);
    data.append('ticket_description', this.state.ticket_description);
    data.append('image', this.state.image);

    await api.post('new_ticket.php', data);
    console.log(this.state);
    this.props.history.push('/done');
};

我如何才能像数组一样获得产品列表以将所有内容一起提交? 这是已部署的应用程序的示例:heroku

1 个答案:

答案 0 :(得分:0)

这可能对您有用。

  

与常规表单数据一样,您可以附加多个具有相同名称的值。例如(并通过在名称中添加[]来与PHP的命名约定兼容):

formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg');
formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append