反应形式结合

Question

根据下拉选择获取和存储选定的字段值，以及获取表单字段。下拉列表和表单字段是单独的表单。如何将两个单独的表单字段合并为一个表单，以及如何将其存储到数据库中？

任何想法请.... 谢谢你的帮助

Answer 1

在发送到后端/数据库之前，您可以将它们存储为 formData。这可能是这样的：

function formBody(){
    const initialValues = {
        value_from_dropdown: "",
        value_from_text_field: "",
    }
    const [values, setValues] = useState(initialValues);
    const handleDropDownValueChange = () => {
         event.persist();
         setValues((values) => ({
            ...values,
            value_from_dropdown: event.target.value,
         }));
    }
     const handleTextValueChange = () => {
         event.persist();
         setValues((values) => ({
            ...values,
            value_from_text_field: event.target.value,
         }));
    }
    const hanldeSubmit = (e) => {
        const formData = new FormData();
        formData.append('dropdown', values.value_from_dropdown);
        formData.append('textfield', values.value_from_text_field);

    
    // post data
    
    }
}