上位コンポーネントで入力値を取得

Question

上位のコンポーネントでの入力値の抽出に問題があります。

私のcontactFormData objectcプロパティに入力値を割り当てたいと思います。

コード：私はすべての値があり、私のオブジェクトをCONSOLE.LOG

export default withReflex()(ContactForm) 
function ContactForm() { 
    let contactFormData = { 
    subject: '', 
    email: '', 
    message: '', 
    } 
    return (
    <Section style={styles.container}> 
     <SectionTitle> 
     Contact Us 
     </SectionTitle> 
     <SectionSubtitle> 
     And let&apos;s code together 
     </SectionSubtitle> 

     <Flex col={12} justify="center" wrap style={{ margin: 'auto' }}> 

      <Flex p={2} col={12} md={6}> 
      <input 
       style={styles.input} 
       type="text" name="subject" 
       placeholder="Subject" 
       onChange={(subjectInput) => contactFormData.subject = subjectInput} 
       required 
      /> 
      </Flex> 

      <Flex p={2} col={12} md={6}> 
      <input 
       style={styles.input} 
       type="email" 
       name="from" 
       placeholder="Email" 
       onChange={(emailInput) => contactFormData.email = emailInput} 
       required /> 
      </Flex> 

      <Flex p={2} col={12}> 
      <textarea 
       style={{ ...styles.input, height: 250 }} 
       placeholder="Message" 
       name="body" 
       onChange={(messageInput) => contactFormData.message = messageInput} 
       required 
      /> 
      </Flex> 

      <Flex p={2} col={12} justify="center"> 
      <Button 
       typeStyle="primary" 
       style={{ width: '100%' }} 
       onClick={sendContactMail} 
      > 
       SEND THE MESSAGE 
      </Button> 
      </Flex> 
     </Flex> 
    </Section> 
) 
    function sendContactMail() { 
    console.log(contactFormData); 
    } 
} 

は、 "プロキシ" は期待値

のinsted

コンソール：

Answer 1

使用

onChange={(event) => contactFormData.subject = event.target.value;