将带有条件的 <button> 转换为 <input>答案

【问题标题】：Converting a <button> with condition into an <input>将带有条件的 <button> 转换为 <input>
【发布时间】：2022-08-13 23:35:24
【问题描述】：

我有一个联系表格，用<input>s 和<button> 制作。我将<button> 更改为<input>，但现在我不知道如何在此输入中添加我的条件{loading ? \"Sending ????\" : \"Send Message\"}。有什么好的解决办法吗？

我的联系表格代码：

      <form
        className=\"app__footer-form app__flex\"
        ref={form}
        onSubmit={sendEmail}
      >
        {!isFormSubmitted ? (

            //button to remove
            <button type=\"button\" className=\"p-text\" onClick={handleSubmit}>
              {loading ? \"Sending ????\" : \"Send Message\"}
            </button>

            //input to use with condition {loading ? \"Sending ????\" : \"Send Message\"}
            <input type=\"submit\" value=\"Send\" className=\"button\" onClick={handleSubmit} />
          </div>
        ) : (
          <div>
            <h3 className=\"head-text\">Thank you in getting in touch!</h3>
          </div>
        )}
      </form>

备注：我在渲染中添加了两个按钮，我想要删除的原始按钮和我想要在条件下使用它的按钮。

标签： reactjs

【解决方案1】：

那么，在渲染这个按钮时，什么指定文本按钮的？：

&lt;input type="submit" value="Send" className="button" onClick={handleSubmit} /&gt;

按钮上呈现的文本是Send。因此可以得出结论，value 属性指定了显示的文本。所以这就是你有条件地放置你的文本的地方：

<input type="submit" value={loading ? "Sending ?" : "Send Message"} className="button" onClick={handleSubmit} />

【讨论】：