【问题标题】：Deactivate input in react with a button click通过单击按钮来停用输入
【发布时间】：2016-08-14 21:28:50
【问题描述】：

我有这个基本组件，我希望在单击按钮时停用或激活文本字段。我怎样才能做到这一点？

这是我的示例代码：

import React from "react";
import Button from 'react-button'

const Typing = (props) => {
    var disabled = "disabled";
    var enabled = !disabled;

  const handleUserInput = (event) => props.onUserInput(event.target.value);
  const handleGameClik = (props) => {

      disabled = enabled;
  }
  return(
      <div>

          <input
              className = "typing-container"
              value = {props.currentInput}
              onChange = {handleUserInput}
              placeholder=" ^__^ "
              disabled = {disabled}/>
          <Button  onClick = {handleGameClik}> Start Game  </Button>
          <Button> Fetch Data </Button>

          </div>
          );
};

【问题讨论】：

您需要将disable 变量存储在组件state 中并在那里进行更改。当你改变组件的状态时，render 方法会调用并刷新组件。

标签： button input reactjs onclick components

【解决方案1】：

使用状态的简化解决方案可能如下所示：

class Typing extends React.Component {
  constructor(props) {
    super(props);
    this.state = { disabled: false }
  }
  handleGameClik() {
    this.setState( {disabled: !this.state.disabled} )
  } 
  render() {
    return(
        <div>
          <input
                className = "typing-container"
                placeholder= " type here "
                disabled = {(this.state.disabled)? "disabled" : ""}/>
          <button  onClick = {this.handleGameClik.bind(this)}> Start Game  </button>
          <button> Fetch Data </button>
        </div>
    );
  }
};

工作Codepen here。

【讨论】：

当 prop 为 false 时，你不需要做 {(this.state.disabled)? "disabled" : ""} || null 它被自动省略。 disabled={this.state.disabled} 就够了。
此外，disabled="disabled" 和 disabled="" 都表示在 HTML 中禁用输入。布尔属性在属性被删除时为假，而不是设置为空字符串。事实上，这个答案绝对应该被编辑以删除不正确的代码。
@Domino 我同意我的代码可能会更干净/更好，但它并非不正确。您可以在工作的 codepen 中看到示例代码可以正常工作，因此“disabled”和“”在 react/jsx 中的含义不同。今天，我可能会使用钩子和<input disabled={this.state.disabled} 之类的东西。
啊，我明白了。 React 实际上并没有调用element.setAttribute("disabled", "")，但可能会将其转换为element.disabled = ""，并且空字符串为假。这肯定是一个需要牢记的怪癖。

【解决方案2】：

2019

另一种选择是使用 react-hooks 的 hook useState。

编辑：在功能组件中

import React, {useState} from 'react';

function Typing(props) {
  const [disabled, setDisabled] = useState(false);

  function handleGameClick() {
    setDisabled(!disabled);
  }

  return (
    <div>
      <input
        className='typing-container'
        placeholder=' type here '
        disabled={disabled}
      />
      <button type='submit' onClick={handleGameClick}> Start Game </button>
      <button> Fetch Data </button>
    </div>
  );
}

【讨论】：

或者，如果您的 disabled 状态依赖于其他一些道具或状态项，请使用 useMemo。
react-hooks' hook -> 功能组件
这是一个更好的解决方案

【解决方案3】：

这可能会让您感到困惑，但 React.js 的人实际上重建了每个表单组件，并使它们看起来几乎与原生 HTML 组件完全相同。不过还是有一些区别。

在 HTML 中，您应该禁用这样的输入字段：

<input disabled="disabled" />

但在 React.js 中你必须使用：

<input disabled={true} />

接受的示例有效，因为任何不是0 的都被视为true。因此"disabled"也被解释为true。

【讨论】：

【解决方案4】：

const [disabled , setDisabled] = useState(true) 
if(condition){ 
 setDisabled(false)
}else{ 
 setDisabled(true) 
} 
return
<TextField placeholder="Name" disabled={ disabled} />

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。

** 2019 **

2019