我无法在单击提交按钮时更改输入标签的状态并且当它没有填充文本时？

Question

我在这里建立了一个表单，当我点击提交按钮时
如果标题部分（带有 id form-title 的输入）是空的，输入的边框会得到一个特定的类名，但是
没用
我上传了一张图片并指定了提交按钮和标题输入我的目的是当我点击提交按钮时，代码必须检查输入标签（标题）的内部，如果它是空的（我的意思是等于“”）输入的边框变为红色否则变为绿色

import { useState } from "react";
import "./tickets.css";

export default function Tickets() {
// States
const [toggle_new_ticket, setToggle_new_ticket] = useState(false);
const [form_title, set_form_title] = useState("");
const [form_unit, set_form_unit] = useState("");
const [form_explain, set_form_explain] = useState(false);
let [check, setCheck] = useState("");

// States functions
const form_checker = () => {
    setCheck(() => {
        if (form_title == "") {
            check = false;
        } else {
            check = true;
        }
        console.log(check);
    });
};

return (
    <div className="tickets-container">
        {/* New Ticket section */}
        <div className="tickets-new-ticket-container">
            {/* New Ticket Title */}
            <div
                className="tickets-new-ticket-title"
                onClick={(e) => {
                    setToggle_new_ticket(!toggle_new_ticket);
                }}
            >
                <div className="new-ticket-image">
                    <img src="https://img.icons8.com/external-tanah-basah-glyph-tanah-basah/48/000000/external-plus-user-interface-tanah-basah-glyph-tanah-basah-2.png" />
                </div>
                <div className="new-ticket-title">
                    <sapn> ثبت درخواست جدید</sapn>
                </div>
            </div>
            {/* New Ticket Form */}
            {toggle_new_ticket ? (
                <div className="tickets-new-ticket-form-container">
                    {/* Form top container */}
                    <div className="tickets-new-ticket-form-top-container">
                        {/* Form title part */}
                        <div className="new-ticket-form-title">
                            <label htmlFor="form-title">عنوان</label>
                            <input
                                onChange={(e) => {
                                    set_form_title(e.target.value);
                                }}
                                className={check ? "form-correct" : "form-alarm"}
                                type="text"
                                name="form-title"
                                id="form-title"
                                required
                                value={form_title}
                                title="عنوان مورد نظرتان را وارد کنید"
                                {...console.log(check)}
                            />
                            <span>current state of title:{}</span>
                        </div>
                        {/* Form unit part */}
                        <div className="new-ticket-form-unit">
                            <label htmlFor="form-unit">واحد</label>
                            <select name="form-unit" id="form-unit" required>
                                <option value disabled selected className="form-unit-header">
                                    واحد مورد نظر را انتخاب کنید
                                </option>
                                <option value="پیگیری سفارش">پیگیری سفارش</option>
                                <option value="احراز هویت"> احراز هویت</option>
                                <option value="مالی">مالی </option>
                                <option value="سایر">سایر </option>
                            </select>
                        </div>
                    </div>
                    {/* Form order part */}
                    <div className="new-ticket-form-order">
                        <label htmlFor="form-order">در خصوص سفارش</label>
                        <select name="form-order" id="form-order">
                            <option value="">هیچکدام</option>
                        </select>
                    </div>
                    {/* Form explain part */}
                    <div className="new-ticket-form-explain">
                        <label htmlFor="form-explain">توضیحات</label>
                        <textarea
                            name="form-explain"
                            id="form-explain"
                            cols="60"
                            rows="10"
                            value={form_explain}
                            onChange={(e) => {
                                set_form_explain(e.target.value);
                            }}
                        ></textarea>
                    </div>
                    {/* ّForm upload file part */}
                    <div className="new-ticket-form-upload-file">
                        <label htmlFor="">فایل پیوست</label>
                        <label htmlFor="form-upload" className="form-upload">
                            <span>انتخاب فایل</span>
                            <img src="https://img.icons8.com/metro/20/000000/upload.png" />
                        </label>
                        <input type="file" name="form-upload" id="form-upload" />
                        <span className="form-upload-explain">
                            پسوندهای مجاز: jpg, jpeg, png, pdf, doc, docx, zip, rar حداکثر
                            حجم فایل 5 مگابایت
                        </span>
                    </div>
                    {/* Form submit btn */}
                    <div className="new-ticket-form-submit">
                        <input
                            type="submit"
                            name="form-submit"
                            id="form-submit"
                            value="ارسال درخواست"
                            onClick={() => {
                                form_checker();
                            }}
                        />
                    </div>
                </div>
            ) : (
                ""
            )}
        </div>
        {/* Tickets log section */}
        <div className="tickets-log-container"></div>
    </div>
);}

Answer 1

这样试试

import React, { useState } from 'react';
import "./tickets.css";
export default function App() {
    // States
    const [toggle_new_ticket, setToggle_new_ticket] = useState(false);
    const [form_title, set_form_title] = useState('');
    const [form_unit, set_form_unit] = useState('');
    const [form_explain, set_form_explain] = useState(false);
    let [check, setCheck] = useState(false);

  
    React.useEffect(() => {
      if (form_title !== '') {
        setCheck(true);
      } else {
        setCheck(false);
      }
    }, [form_title])

    return (
        <div className="tickets-container">
            {/* New Ticket section */}
            <div className="tickets-new-ticket-container">
                {/* New Ticket Title */}
                <div
                    className="tickets-new-ticket-title"
                    onClick={(e) => {
                        setToggle_new_ticket(!toggle_new_ticket);
                    }}
                >
                    <div className="new-ticket-image">
                        <img src="https://img.icons8.com/external-tanah-basah-glyph-tanah-basah/48/000000/external-plus-user-interface-tanah-basah-glyph-tanah-basah-2.png" />
                    </div>
                    <div className="new-ticket-title">
                        <sapn> ثبت درخواست جدید</sapn>
                    </div>
                </div>
                {/* New Ticket Form */}
                {toggle_new_ticket ? (
                    <div className="tickets-new-ticket-form-container">
                        {/* Form top container */}
                        <div className="tickets-new-ticket-form-top-container">
                            {/* Form title part */}
                            <div className="new-ticket-form-title">
                                <label htmlFor="form-title">عنوان</label>
                                <input
                                    onChange={(e) => {
                                        set_form_title(e.target.value);
                                    }}
                                    className={ check ? 'form-correct' : 'form-alarm'}
                                    type="text"
                                    name="form-title"
                                    id="form-title"
                                    required
                                    value={form_title}
                                    title="عنوان مورد نظرتان را وارد کنید"
                                    {...console.log(check)}
                                />
                                <span>current state of title:{}</span>
                            </div>
                            {/* Form unit part */}
                            <div className="new-ticket-form-unit">
                                <label htmlFor="form-unit">واحد</label>
                                <select
                                    name="form-unit"
                                    id="form-unit"
                                    required
                                >
                                    <option
                                        value
                                        disabled
                                        selected
                                        className="form-unit-header"
                                    >
                                        واحد مورد نظر را انتخاب کنید
                                    </option>
                                    <option value="پیگیری سفارش">
                                        پیگیری سفارش
                                    </option>
                                    <option value="احراز هویت">
                                        {' '}
                                        احراز هویت
                                    </option>
                                    <option value="مالی">مالی </option>
                                    <option value="سایر">سایر </option>
                                </select>
                            </div>
                        </div>
                        {/* Form order part */}
                        <div className="new-ticket-form-order">
                            <label htmlFor="form-order">در خصوص سفارش</label>
                            <select name="form-order" id="form-order">
                                <option value="">هیچکدام</option>
                            </select>
                        </div>
                        {/* Form explain part */}
                        <div className="new-ticket-form-explain">
                            <label htmlFor="form-explain">توضیحات</label>
                            <textarea
                                name="form-explain"
                                id="form-explain"
                                cols="60"
                                rows="10"
                                value={form_explain}
                                onChange={(e) => {
                                    set_form_explain(e.target.value);
                                }}
                            />
                        </div>
                        {/* ّForm upload file part */}
                        <div className="new-ticket-form-upload-file">
                            <label htmlFor="">فایل پیوست</label>
                            <label
                                htmlFor="form-upload"
                                className="form-upload"
                            >
                                <span>انتخاب فایل</span>
                                <img src="https://img.icons8.com/metro/20/000000/upload.png" />
                            </label>
                            <input
                                type="file"
                                name="form-upload"
                                id="form-upload"
                            />
                            <span className="form-upload-explain">
                                پسوندهای مجاز: jpg, jpeg, png, pdf, doc, docx,
                                zip, rar حداکثر حجم فایل 5 مگابایت
                            </span>
                        </div>
                        {/* Form submit btn */}
                        <div className="new-ticket-form-submit">
                            <input
                                type="submit"
                                name="form-submit"
                                id="form-submit"
                                value="ارسال درخواست"
                                onClick={() => {
                                    form_checker();
                                }}
                            />
                        </div>
                    </div>
                ) : (
                    ''
                )}
            </div>
            {/* Tickets log section */}
            <div className="tickets-log-container" />
        </div>
    );
}

使用UseEffect钩子，当title改变的时候会触发，并且可以检查title是否为空，也不需要使用state callback来设置check值。

我无法在单击提交按钮时更改输入标签的状态并且当它没有填充文本时？

I can't change the state of the input tag when click on submit button and when it's empty of fill with text?

javascript

state

reactjs