javascript - 如何在反应中调用函数/对象？

问题描述

我建立了一个网站，用户可以在其中输入如下所示的送货地址

我仍然不明白代码是如何被调用的。我有一个路由器，当用户通过 url“/shipping”时，文件本身会被调用。但是代码并没有调用函数本身。我的意思是没有像“shippingAdressScreen();”这样的东西。就像我从 java 知道的一样。

JS不需要这个吗？如果是这样，我们为什么要给这个函数起一个名字，为什么要导出它？该函数未在其他地方导入。

代码如下：

路由器：

{
    path: SHIPPING_PAGE,
    component: Loadable({
      loader: () =>
        import(/* webpackChunkName: "Pricing" */ './container/Cart/ShippingAdressScreen.js'),
      loading: Loading,
      modules: ['Products'],
    }),
  },

运输地址屏幕

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { saveShippingAddress } from '../../frontend/actions/cartActions';
import CheckoutSteps from '../Cart/CheckOutSteps';
import './index.css'

export default function ShippingAddressScreen(props) {
  const cart = useSelector(state => state.cart)
  const {shippingAddress} = cart;
  
  const [fullName, setFullName] = useState(shippingAddress.fullName || '');
  const [address, setAddress] = useState(shippingAddress.address || '');
  const [city, setCity] = useState(shippingAddress.city || '');
  const [postalCode, setPostalCode] = useState(shippingAddress.postalCode || '');
  const [country, setCountry] = useState(shippingAddress.country || '');
  const dispatch = useDispatch();


  // login form submithandler
  const submitHandler = (e) => {
    e.preventDefault();
    dispatch(saveShippingAddress({fullName, address, city, postalCode, country}))
    props.history.push('/payment')
  };

  return (
    <div className = "poscss">
      <CheckoutSteps step1 step2></CheckoutSteps>
      <form className="form" onSubmit={submitHandler}>
        <div>
          <h1>Shipping Address</h1>
        </div>
        <div>
          <label htmlFor="fullName">Full Name</label>
          <input
            type="text"
            id="fullName"
            placeholder="Enter full name"
            value={fullName}
            onChange={(e) => setFullName(e.target.value)}
            required
          ></input>
        </div>
        <div>
          <label htmlFor="address">Address</label>
          <input
            type="text"
            id="address"
            placeholder="Enter address"
            value={address}
            onChange={(e) => setAddress(e.target.value)}
            required
          ></input>
        </div>
        <div>
          <label htmlFor="city">City</label>
          <input
            type="text"
            id="city"
            placeholder="Enter city"
            value={city}
            onChange={(e) => setCity(e.target.value)}
            required
          ></input>
        </div>
        <div>
          <label htmlFor="postalCode">Postal Code</label>
          <input
            type="text"
            id="postalCode"
            placeholder="Enter postal code"
            value={postalCode}
            onChange={(e) => setPostalCode(e.target.value)}
            required
          ></input>
        </div>
        <div>
          <label htmlFor="country">Country</label>
          <input
            type="text"
            id="country"
            placeholder="Enter country"
            value={country}
            onChange={(e) => setCountry(e.target.value)}
            required
          ></input>
        </div>
        <div>
          <label htmlFor="chooseOnMap">Location</label>
          <button type="button" >
            Choose On Map
          </button>
        </div>
        <div>
          <label />
          <button className="primary" type="submit">
            Continue
          </button>
        </div>
      </form>
    </div>
  );
}

编辑：

const App = () => (
  <ThemeProvider theme={theme}>
    <>
      <GlobalStyles />              
      <BrowserRouter>              
         <AuthProvider>            
          <Routes />
        </AuthProvider>
      </BrowserRouter>
    </>
  </ThemeProvider>
);

ReactDOM.render(
  <Provider store ={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
);

上面的路由在 const App 内部被调用，使用 RractDOM.render() 渲染。这是魔术发生的地方吗？

标签： javascriptreactjs

javascript - 如何在反应中调用函数/对象？

问题描述

解决方案

推荐阅读