如果反应中的文本框为空，我想禁用按钮

Question

return (

    {jobstate.jobs.map((data,i) =>{ 

  <form>

    <input type="text" placeholder="Post a comment" onChange={(e) => jobcmthandler(e,data._id,i) } />

    <button type="button" onClick={postcmt} >Send</button>

  </form>

   })}

)

我使用 map 函数生成动态 HTML 并且我想禁用按钮，如果文本为 null for induvial form 以及如何在 react js 中单击按钮时获取文本值

Answer 1

我真的不明白你为什么要这样做但是：

import React, { useState } from "react";

export default function App() {

  return ["Name", "Age"].map((label) => <Form label={label} />);

}

function Form({ label }) {

  const [readValue, writeValue] = useState("");

  return (

    <form>

      <label>{label}</label>

      <input

        type="text"

        placeholder="Post a comment"

        onChange={(e) => writeValue(e.target.value)}

        value={readValue}

      />

      <button

        type="button"

        onClick={() => console.log("Submit")}

        disabled={readValue === ""}

      >

        Send

      </button>

    </form>

  );

}