reactjs - 将数据从一个组件传递到另一个组件时，表单验证不起作用

Question

我是 React Js 的新手，我必须将数据从一个组件传递到另一个组件。我的问题在这里解决了：

如何将输入数据从一个组件复制到另一个组件？

但是，这里的第一个表单可以在没有任何验证的情况下提交。如何验证第一个表单，使其在为空时不会重定向到另一个页面？

代码如下：

const BookingBar = () => {
    const classes = useStyles();
    const [formData, setFormData] = useState({
        appliance: "",
        zipcode: ""
      });
    const handleUpdate = e =>
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });

  const { appliance, zipcode } = formData;
    return(
      <div style={{ display: 'flex', flexFlow: 'Column wrap',  justifyContent: 'center', margin: 'auto', padding: '0px 30px', lineHeight: '1.2em'}}>
                    <div>
                        <Typography variant="h6" style={{color: 'black', fontFamily: 'Ubuntu',   lineHeight:"1.6em", textAlign: 'left', fontWeight: '400'}}>
                            I need an Engineer to repair my&nbsp;
                        </Typography>
                    </div>
                    <div >
                        <FormControl style={{width: '60%'}}>
                            <Select 
                                value={appliance}
                                name="appliance"
                                id="demo-customized-select-native"
                                input={<BootstrapInput />}
                                onChange={e => handleUpdate(e)}
                              >
                              <MenuItem value={'Refrigerator'}>Refrigerator</MenuItem>
                              <MenuItem value={'Freezer'}>Freezer</MenuItem>
                              <MenuItem value={'Ice Maker'}>Ice Maker</MenuItem>
                              <MenuItem value={'Range'}>Range</MenuItem>
                              <MenuItem value={'Cooktop'}>Cooktop </MenuItem>
                              <MenuItem value={'Oven'}>Oven </MenuItem>
                              <MenuItem value={'Microwave'}>Microwave</MenuItem>
                              <MenuItem value={'Washing Machine'}>Washing Machine</MenuItem>
                              <MenuItem value={'Clothes Dryer'}>Clothes Dryer</MenuItem>
                              <MenuItem value={'Dishwasher'}>Dishwasher</MenuItem>
                              <MenuItem value={'Garbage Disposal'}>Garbage Disposal</MenuItem>  
                              <MenuItem value={'Trash Compactor'}>Trash Compactor</MenuItem>
                            </Select>
                        </FormControl>&nbsp;
                    </div>
                    <div>
                        <Typography variant="h6" style={{color: 'black', fontFamily: 'Ubuntu',   lineHeight:"1.6em", textAlign: 'left', fontWeight: '400'}}>
                         in&nbsp;
                        </Typography>
                    </div>
                    <div>
                        <FormControl style={{width: '60%'}}>
                            <BootstrapInput 
                                value={zipcode}
                                name="zipcode"
                                onChange={e => handleUpdate(e)}  
                                type="number" 
                                id="demo-customized-textbox" 
                                placeholder="Zip Code"/>
                        </FormControl>  &nbsp;   
                    </div>
                    <div style={{paddingTop: '1em'}}>
                      <Link to={`../Repair/${zipcode}/${appliance}`}>
                          <Button 
                                  variant="contained" 
                                  fullwidth 
                                  type="submit"
                                  size='large' 
                                  style={{
                                      backgroundColor: 'white', 
                                      color: '#153f5f', 
                                      textTransform: 'unset', 
                                      fontFamily: 'ubuntu', 
                                      fontWeight: '500', 
                                      fontSize: '14px', 
                                      borderRadius: "35px",
                                      padding: '10px 0px!important',
                                  }}>
                                          Go
                          </Button>
                      </Link>    
                    </div>
        </div>
    )};

export default BookingBar;

任何帮助，将不胜感激。谢谢

标签： reactjsvalidationmaterial-uireact-hook-form