REACT js - 使用 antd datepicker 值更新状态

Question

我正在尝试为一个简单的应用程序创建一个表单，该应用程序应该将一些数据更新到后端。

在表单中我有多个输入，现在我正在使用一个 onChange 处理程序处理所有输入，一旦我添加了一个日期选择器，我就无法访问他的值或用日期更新状态已选。

我得到的错误是：“未捕获类型错误：无法读取未定义的属性（读取 'value'）”

我知道 antd datepicker 需要一个不接收事件但接收 moment 对象和字符串的处理程序（根据 antd 文档 here）

现在最大的问题是，我如何用那个日期更新状态？

最好的选择是使用一个处理程序，但最重要的是更新状态。

这里是我的代码：

const Nuovo  = ( )=> {
    
    const [lavorazione, setLavorazione] = useState({
        numero : 0,
        date:'',
        nome :'',
        cognome : '',
        nomeAzienda: '',
        modello :'',
        targa : '',
        telefono : '',
        mail : '',
        quantità: 0 ,
        misura : '',
        marca : '',
        cerchi :'' ,

    })
    const [success, setSuccess]= useState(false)
    const dateFormat = 'DD/MM/YYYY'  
    
   // updating db
    const addLavorazione =  (lavorazione)=>{
            const db = getDatabase();
            set(ref(db,'lavorazione/'+ lavorazione.numero),lavorazione)
            setSuccess(true);
            clear()
            console.log('[LAVORAZIONE]',lavorazione)
            console.log('[PRE-TIMEOUT',success)
            setTimeout(()=>{
                setSuccess(false)
                console.log('[TIMEOUT]',success)
            },5000)

            
        }
        
        //2WAY BINDING FORM
        function onChange (e){
            
            const value = e.target.value;
            setLavorazione({
                ...lavorazione,
                [e.target.name]:value
            });
            
            console.log('[CHANGE-VALUE]', value)
        }
        
        const [form] = Form.useForm();
        const clear =()=>{
            form.resetFields()
        }    
        
        return(
        
               
        <Form
                
            form={form}
            layout='vertical'
            onFinish={addLavorazione}
            autoComplete="off">
            <Row >
                <Col lg={12} xs={24} sm={24} className='form-container'>
                    <h2>CODICE LAVORAZIONE</h2>
                    <Form.Item
                        name="numero"
                        label="Numero"
                        rules={[{ required: true },  ]}
                    >
                        
                        <Input  placeholder='Numero' 
                                value={lavorazione.numero} 
                                name='numero'
                                onChange={onChange} />
                             
                    </Form.Item>                       
                    
                         <Space direction="vertical">
                            <DatePicker onChange={onChange}  format ={dateFormat} placeholder='Scegli la Data' name='date' value={lavorazione.date}   />
                            
                        </Space>
                             
                   
                    <h2>ANAGRAFICA CLIENTE</h2>
                    <Form.Item
                        name="nome"
                        label="Nome"
                        rules={[{ required: true },  { type: 'string', min: 3 }]}
                    >
                        
                        <Input  placeholder='Nome' 
                                value={lavorazione.nome} 
                                name='nome'
                                onChange={onChange} />
                             
                    </Form.Item>
                    <Form.Item
                        name="cognome"
                        label="Cognome"
                        rules={[{ required: true },  { type: 'string', min: 3 }]}
                    >
                        <Input placeholder='Cognome' 
                                value={lavorazione.cognome }
                                name='cognome'
                                onChange={onChange} />
                    </Form.Item>
                    
                    //... many other inputs down here
                    </Col>
                   </Row>
                  </Form>
                 )
                }
                
               export default Nuovo

提前感谢大家的宝贵时间！！！！

Answer 1

您可以将自定义对象传递给 onChange 函数

<DatePicker
  onChange={(value) =>
    onChange({ target: { value, name: "date" } })
  }
  format={dateFormat}
  placeholder="Scegli la Data"
  name="date"
  value={lavorazione.date}
/>

REACT js - 使用 antd datepicker 值更新状态

REACT js - Updating state with antd datepicker value

reactjs

datepicker

antd

onchange