时间戳

首页 > 解决方案 > 如何在 React.js 中使用道具禁用按钮？

reactjs - 如何在 React.js 中使用道具禁用按钮？

问题描述

我是 React.js 的新手。我正在尝试使用道具值禁用按钮。这就是我正在尝试做的事情，但它无法正常工作并抛出错误Parsing error: Unexpected token, expected "..."。这是正确的方法吗？请帮我。谢谢

import React from "react";

function Note(props) {

  function handleClickUpdateA() {
    props.onUpdateA(props.id);
  }

  var dis;

  if(props.des === '1')
  {
    dis = 'disabled';
  } else
  {
    dis = ' ';
  }

  return (

    <div>
      <p>{props.content}</p>
      <button {dis} onClick={handleClickUpdateA}>Accept</button>
    </div>
  );
}

export default Note;

标签： reactjs

解决方案

button元素得到一个disabled道具。您可以将其设置true为禁用它。并且false能够做到。所以你只需要在jsx下面改变你的喜欢。

JSX 部分：

<button disabled={dis === 'disabled'} onClick={handleClickUpdateA}>Accept</button>

但我建议使用isDisabled变量并将其设置为true或false代替dis字符串值。这是我认为的最佳实践。

所以你的代码会变成这样：

JS部分：

var isDisabled = props.des === '1' ? true : false;

JSX 部分：

<button disabled={isDisabled} onClick={handleClickUpdateA}>Accept</button>

它现在更具可读性。

推荐阅读