如何在反應 17.0.1 中獲取動態表單值

Question

我是動態生成的表格。

{
    schedule[0] ?
    Object.keys(schedule[0]).map((j, i) => (
        <Col sm={12} xs={12} md={3} lg={3}>
            <Form.Group controlId={j}>
                <Form.Label>{j}</Form.Label>
                <Form.Control
                    type="text"
                    required
                    onChange={(event) => { setVendorName(event.target.value) }}
                />
            </Form.Group>
         </Col>
     ))
     :
     <p style={{ color: "#ffffff" }}>Loading</p>
 }

我的 State：

const [vendorName, setVendorName] = useState('');

在提交 function 內：

const formData = new FormData();
formData.append('vendorName', vendorName);

這樣生成了四種輸入類型的文本 html ，如何保存輸入標簽的值？

Answer 1

您可以將 object 設置為useState 。 在onChange function 中，可以將setFormValue放入其中。 [event.target.name]是輸入的動態鍵，因此formValue將相應更新。

const [formValue, setFormValue] = useState({input1: "",input2: "",input3: "",input4: "",});

Object.keys(schedule[0]).map((j, i) => (
        <Col sm={12} xs={12} md={3} lg={3}>
            <Form.Group controlId={j}>
                <Form.Label>{j}</Form.Label>
                <Form.Control
                    type="text"
                    name={`input${i+1}`}
                    required
                    onChange={(event) => { setFormValue([event.target.name]:{event.target.value}) }}/>
            </Form.Group>
         </Col>
     ))

/>