reactjs - NextJS V15, using App Router - Button click events - Stack Overflow

admin管理员组

文章数量:1334184

Developing a toolbar component, when using onclick event unable to run the application, facing error that client events can not be used, convert into client component but I'm working with server side component,

import { ToolbarProps, ToolbarAction } from "../props"
const Toolbar = (props: ToolbarProps) => {
    const renderAddButton = () => {
        console.log(`add bttton`, props.operation)
        if (props.operation == ToolbarAction.New) {
            return (<>
                <button type="submit" className="pq-btn  pq-btn-save">
                    <i className="icofont-plus"></i>
                    <span>add</span>
                </button>
            </>)
        }
    }
    const renderSubmitButton = () => {
        console.log("Submit button", props);
        if (props.operation == ToolbarAction.Edit) {
            return (<>
                <button className="pq-btn pq-btn-save">
                    <i className="icofont-tick-mark"></i>
                    <span>submit</span>
                </button >
            </>)
        }
    }
    const renderCancelButton = () => {
        if (props.operation == ToolbarAction.Edit) {
            return (<>
                <button className="pq-btn pq-btn-cancel">
                    <i className="icofont-eraser"></i>
                    <span>clear</span>
                </button >
            </>)
        }
    }
    const renderBackButton = () => {
        if (props.operation == ToolbarAction.Edit) {
            return (<>
                <button className="pq-btn pq-btn-back">
                    <i className="icofont-arrow-left"></i>
                    <span>back</span>
                </button >
            </>)
        }
    }
    const renderImportButton = () => {
        if (props.operation == ToolbarAction.New) {
            return (<>
                <button className="pq-btn pq-btn-import">
                    <i className="icofont-upload-alt"></i>
                    <span>upload</span>
                </button >
            </>)
        }
    }
    const renderExportButton = () => {
        if (props.operation == ToolbarAction.New) {
            return (<>
                <button className="pq-btn pq-btn-export">
                    <i className="icofont-download"></i>
                    <span>export</span>
                </button >
            </>)
        }
    }
    const renderDeleteButton = () => {
        if (props.operation == ToolbarAction.New) {
            return (<>
                <button className="pq-btn pq-btn-delete">
                    <i className="icofont-delete-alt"></i>
                    <span>delete</span>
                </button >
            </>)
        }
    }
    return (<>
        <div className="w-full flex flex-row justify-between gap-3 items-center align-middle px-2 py-1 border-b-2">
            <div className="flex flex-col gap-0 w-full justify-between items-start align-middle">
                <h1 className="text-2xl text-pqOrange">{props.pageTitle}</h1>
                <small>{props.subTitle}</small>
            </div>

            <div className="flex flex-row gap-3 w-full justify-end items-center align-middle">
                {renderAddButton()}
                {renderImportButton()}
                {renderExportButton()}
                {renderSubmitButton()}
                {renderDeleteButton()}
                {renderCancelButton()}
                {renderBackButton()}

            </div>

        </div >
    </>)
}

export default Toolbar;

For "Add" button, click event can be implemented using form tag like below code

// button.server.tsx
import { cookies } from 'next/headers';
export async function ButtonServer() {
  const color = cookies().get('x-color')?.value ?? 'blue';
  return (
    <form action={SignInFunction}>
      <input type="hidden" value={color} name="color" />
      <button
        type="submit"
        className={`p-2 rounded-md bg-${color}-500 text-white`}
      >
        with RS action
      </button>
    </form>
  );
}

// sign-in.action.ts
export async function SignInFunction(e: FormData) {
  const formColor = e.get("color") === "blue" ? "red" : "blue";

  cookies().set('x-color', formColor);
  revalidatePath('/');
}

I'm not clear how to implement events related to Import-Export-Delete buttons

本文标签： reactjsNextJS V15using App RouterButton click eventsStack Overflow