取消激活輸入反應與按鈕點擊

Question

我有這個基本組件，我希望textfield被停用或激活，只要我點擊一個按鈕。我怎樣才能做到這一點？

這是我的示例代碼：

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> 
     ); 
}; 

Answer 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。