reactjs 使用时面临不便的表单数据推送

mgdq6dx1 于 2023-02-08 发布在 React

关注(0)|答案(1)|浏览(78)

这是一个表的代码，这个表在react中被Map，并且输出了多个下拉列表，我想把event.target.values附加到一个新的FormData中，并把它推到一个空数组中，但是这个方法在第11行控制台记录它的时候，没有给出表单数据。

import React, { useState } from 'react'

export default function QuantityFields(props) {
    
    let qtyForm = []
    function handleChange(event){
        let formdata = new FormData();
        formdata.append(props.identity.ticket_categories, event.target.value)
        qtyForm.push(formdata)
    }
    console.log(qtyForm)
  return (
    <tr>
        <th style={{fontWeight: "100", alignItems: "center", width: "33%"}} scope="row">
            <div>{props.identity.ticket_categories}</div>
            <div>{props.identity.description}</div>
            <div style={{color: "gray"}}>{props.identity.cover_description}</div>
        </th>
        <td style={{fontWeight: "100", verticalAlign: "middle"}}>{props.identity.price != 0 && "₹"}{props.identity.price != 0 ? props.identity.price : "Free"}</td>
        <td style={{fontWeight: "100", verticalAlign: "middle", textAlign: "center"}}>
            <div className="input-group mb-3 float-right" style={{width: "55%"}}>
            <label className="input-group-text w-50" htmlFor="inputGroupSelect01">Qty</label>
            <select className="form-select" id={"TicketDropdown" + props.index} name={"TicketDropdown" + props.index} onChange={handleChange}>
                <option defaultValue>0</option>
                <option value="1">1</option>  
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
            </div>
        </td>
    </tr>
  )
}

reactjs

来源：https://stackoverflow.com/questions/75290641/formdata-push-facing-inconvenience-when-used

1条答案

按热度按时间

lyr7nygr1#

import React, { useState } from 'react';

const MyComponent = () => {
const [inputValues, setInputValues] = useState([]);
const handleInputChange = (event, index) => {
const newInputValues = [...inputValues];
newInputValues[index] = {
  ...newInputValues[index],
  [event.target.name]: event.target.value
};
setInputValues(newInputValues);
};

return (
  <>
    {
      inputs.map((input, index) => {
        if (!inputValues[index]) {
          setInputValues([...inputValues, {}]);
        }
      
      return (
        <input
          key={index}
          type={input.type}
          name={input.name}
          value={inputValues[index] ? inputValues[index][input.name] : ''}
          onChange={(event) => handleInputChange(event, index)}
        />
       );
     })
    }
 </>
 );
};

export default MyComponent;

这是一个由ChatGPT生成的代码，对我很有帮助。希望它能帮到你。

赞(0）回复(0）举报 2023-02-08

我来回答

reactjs 使用时面临不便的表单数据推送

1条答案

相关问题

热门标签

最新问答