微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Redux-form 为什么外部输入停止工作?

如何解决Redux-form 为什么外部输入停止工作?

https://codesandbox.io/s/form-redux-6lvvo?file=/src/components/ContactForm.js:8134-8139

这是我的沙箱,我在主程序中使用新东西之前尝试新东西。 但是我对 redux-form 有问题。 正如您在演示中看到的那样,有一个外部输入“测试”,如果您尝试在其中写入,您可以看到停止在第一个字符处工作,然后它开始按预期工作。 使用本机输入,我完全没有问题。

我修复了它在 ContactForm 返回中写入事件返回,如下所示:

let ContactForm = (props) => {
  const handleSubmit = () => {
    console.log("Ciao");
  };

  const [item,setItem] = useState([]);

  const [expanded,setExpanded] = useState("panel1");

  //handler
  const handleChange = (panel) => (event,isExpanded) => {
    setExpanded(isExpanded ? panel : false);
  };

  useEffect(() => {
    props.initialize({
      oggetto: "Ciao",inizio: "Ciao",data: "Ciao",fine: "Ciao",luogo: "Ciao",note: "Ciao",preavviso: "Ciao",tipologia: "Ciao",stato: "Ciao",privato: "Ciao",confa: "Ciao",confv: "Ciao"
    });
  },[]);
 

  return (
    <form onSubmit={handleSubmit}>
      <Accordion
          expanded={expanded === "panel1"}
          onChange={handleChange("panel1")}
        >
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
            classes={{ root: "top-accordion" }}
          >
            <Typography>
              <Icon>account_Box</Icon>&nbsp;Evento in agenda
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <TableContainer>
              <Table aria-label="customized table">
                <TableBody classes={{ root: "table-body" }}>
                  <TableRow classes={{ root: "table-row" }}>
                    <Field
                      component={renderTextField}
                      name="oggetto"
                      label="oggetto"
                      fullWidth
                    />
                  </TableRow>
                  <TableRow classes={{ root: "table-row" }}>
                    <Field
                      component={renderTextField}
                      name="tipologia"
                      label="tipologia"
                      fullWidth
                    >
                      <option value="" />
                    </Field>
                  </TableRow>
                  <TableRow classes={{ root: "table-row" }}>
                    <Field
                      component={renderTextField}
                      name="data"
                      label="data"
                      fullWidth
                    />
                  </TableRow>
                  <TableRow classes={{ root: "table-row" }}>
                    <Field
                      component={renderTextField}
                      name="inizio"
                      label="inizio"
                      fullWidth
                    />
                  </TableRow>
                  <TableRow classes={{ root: "table-row" }}>
                    <Field
                      component={renderTextField}
                      name="fine"
                      label="fine"
                      fullWidth
                    />
                  </TableRow>
                  <TableRow classes={{ root: "table-row" }}>
                    <Field
                      component={renderTextField}
                      name="luogo"
                      label="luogo"
                      fullWidth
                    />
                  </TableRow>
                  <TableRow classes={{ root: "table-row" }}>
                    <Field
                      component={renderTextField}
                      name="allarme"
                      label="preavviso"
                      fullWidth
                    />
                  </TableRow>
                  <TableRow classes={{ root: "table-row" }}>
                    <Field
                      component={renderTextField}
                      name="note"
                      label="note"
                      fullWidth
                      multiline
                    />
                  </TableRow>

                  <TableRow classes={{ root: "table-row" }}>
                    <InputForm />
                  </TableRow>
                </TableBody>
              </Table>
            </TableContainer>
          </AccordionDetails>
        </Accordion>
        
        <button type="submit">Submit</button>
    </form>
  );
};

它停止工作有什么原因吗?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。