버튼 클릭 한 번으로 반응 시 입력 비활성화

버튼 클릭 한 번으로 반응 시 입력 비활성화

이 기본 컴포넌트가 있는데 버튼을 클릭할 때마다 텍스트 필드를 비활성화하거나 활성화하고 싶습니다.어떻게 하면 좋을까요?

샘플 코드는 다음과 같습니다.

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

스테이트를 사용한 심플한 솔루션은 다음과 같습니다.

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

여기서 작업하는 코드입니다.

** 2019 **

또 다른 옵션은 리액트 훅 후크를 사용하는 것입니다.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>
  );
}

헷갈리겠지만 React.js의 직원들은 실제로 모든 폼 컴포넌트를 재구축하여 네이티브 HTML 컴포넌트와 거의 똑같이 만들었습니다.하지만 몇 가지 차이점이 있다.

HTML에서는 다음과 같은 입력 필드를 비활성화해야 합니다.

<input disabled="disabled" />

그러나 React.js에서는 다음을 사용해야 합니다.

<input disabled={true} />

받아들여진 예는 어떤 것이든 동작하지 않기 때문에 동작합니다.0고려되고 있다true그 때문에"disabled"라고도 해석됩니다.true.

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

언급URL : https://stackoverflow.com/questions/36773671/deactivate-input-in-react-with-a-button-click