获取更高阶组件的输入值

Question

我在高阶组件中提取输入值onChange时遇到问题。

我想将输入值分配给我的contactFormData对象属性。

代码：

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);
  }
}

当我在console.log中时，我的对象的所有值都是“代理”的预期值

控制台：

Answer 1

使用

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