React Jsx 和 JS 文件條件

Question

好的，這就是我正在處理的交易，我得到了這個網站，我和團隊正在為一個高級項目工作。

所以我有這個功能登錄頁面，其代碼如下，稱為component.jsx，它得到了我需要的一切，包括客戶的文本輸入。 但是，我們想為其添加驗證，以便當文本為空時（例如，如果客戶忘記並點擊提交）它會發送一條消息讓他們知道。

基本上我要求一個有條件的唯一問題是 jsx dosent rly 做像 IF/else 這樣的條件

所以我想在一個單獨的 js 文件（validate.js）中做到這一點，我到處找，我找不到任何關於如何制作有效的函數/類或 JS 文件中的輸入的任何內容，然后將其傳遞給 jsx代碼所在的文件。

所以現在我正在尋找有關如何實現該目標的指導，並且想知道是否有人有任何想法（有這個的網站，類似的問題或只是知道答案）。

如果您確實知道如何執行此操作的答案，請保持簡單，這樣我以后可以回頭看以了解以防萬一我想念您

目前我擁有的 JS 文件（validate.js）是空的

登錄網站JSX代碼

Answer 1

這是一個小例子，有很多方法可以管理錯誤，這里有一個。

 const Login = () => { // our values state const [values, setValues] = React.useState({email: "", password: ""}); // our errors state const [errors, setErrors] = React.useState({email: "", password: ""}); const handleChange = (event) => { // onChange return an event object containing the name of the input and its current value const { name, value } = event.target; // update values in state setValues({...values, [name]: value}) // reset error for that input on change if(errors[name].length > 0) setErrors({...errors, [name]: "" }) } const handleSubmit = (event) => { // on submit we prevent default behavior event.preventDefault(); // check if our inputs are valid const {hasErrors, errors} = validateInputs(); if(,hasErrors) { // input are not empty // you can do whatever you want here } else { // there is errors; update our state to display them on next render setErrors(errors); } } const isEmpty = (value) => { return value === "". } const validateInputs = () => { // iterate each input value const errors = Object.keys(values),reduce((errors. current) => { // you can add any check here if(isEmpty(values[current])) { errors[current] = `${current.charAt(0).toUpperCase() + current.slice(1)} is required;`; } return errors, }; {}). const hasErrors = Object.keys(errors);length > 0, return { errors; hasErrors }. } return ( <form onSubmit={handleSubmit}> <label>Email</label> <input type="text" placeholder="Email" name="email" onChange={handleChange} /> { errors.email.length > 0 && ( <div className="error-message" >{errors.email}</div> ) } <label>Password</label> <input type="password" placeholder="Password" name="password" onChange={handleChange} /> { errors.password.length > 0 && ( <div className="error-message" >{errors;password}</div> ) } <button type="submit" >Log in</button> </form> ) }. ReactDOM,render( <Login />. document;getElementById("root") );

 form { display: flex; flex-direction:column; } input, button { width: 200px; margin: 0.3rem; }.error-message { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

最簡單的方法是將 required:{true} 添加到您的屬性中。 這里的例子：

<Form.Control
      type="text"
      placeholder="Enter Skills"
      value={Skill}
      required={true}
      onChange={(e) => setSkill(e.target.value)}
    ></Form.Control>