web-dev-qa-db-ja.com

ボタンクリックで反応する入力を無効にする

この基本的なコンポーネントがあり、ボタンをクリックするたびにテキストフィールドを非アクティブまたはアクティブにする必要があります。どうすればこれを達成できますか？

これは私のサンプルコードです。

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>
          );
};
buttoninputreactjsonclickcomponents
15
Second Son

状態を使用した単純化されたソリューションは次のようになります。

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

作業中 ここにコードペン 。

23
wintvelt

** 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>
  );
}
5
Second Son

これは混乱を招くかもしれませんが、React.jsのスタッフは実際にすべてのフォームコンポーネントを再構築し、ネイティブHTMLコンポーネントとほとんど同じように見せました。ただし、いくつかの違いがあります。

HTMLでは、次のように入力フィールドを無効にする必要があります。

<input disabled="disabled" />

ただし、React.jsでは次を使用する必要があります。

<input disabled={true} />

受け入れられた例は、0はtrueと見なされます。そのため"disabled"もtrueとして解釈されます。

3
Sam