ラジオボタンの選択時にボタンを有効/無効にする方法は？

Question

私はreactjsに新しいです。現在私のアプリケーションでは、ラジオボタンの選択時にボタンを有効または無効にしたいと考えています。

class Radiosample extends React.Component { 

    render() { 
     <table> 
     <tbody> 
     <tr> 
      <td> 
       <Field name="radio1" component="input" id="radio1" type="radio"/> // On check of this radio button below button should enable.. 
      </td> 
      <Button name="button" id="btn">Click Me</Button> 
     </tr> 
     </tbody> 
     </table> 
    } 
} 

export default Radiosample 

おかげ

Answer 1

ない非常に一般的な、しかし、この単純なことでは動作しないでください。以下は、私のコードはありますか？

class Radiosample extends React.Component { 
    function disableButton() { 
     document.getElementById("btn").disabled = true; 
    } 

    render() { 
     <table> 
     <tbody> 
     <tr> 
      <td> 
       <Field name="radio1" onclick="this.disableButton()" component="input" id="radio1" type="radio"/> // On check of this radio button below button should enable.. 
      </td> 
      <Button name="button" id="btn">Click Me</Button> 
     </tr> 
     </tbody> 
     </table> 
    } 
} 

export default Radiosample 

Answer 2

あなたは状態、そうでない場合は、ページが再レンダリングされないを使用する必要があります。あなたがちょうどあなたの<Field />コンポーネントonClick={this.setButtonDisability}またはonChange={this.setButtonDisability}に追加状態

setButtonDisability = (event: React.MouseEvent<HTMLInputElement>) => this.setState({ isButtonDisabled: /* value from event target */ }) 

を更新する必要が

のでのonClickまたはのonChangeイベント。その後、

、あなたは間違いなくoficial intro tutorialて行くべき機能

<Button name="button" disabled={this.state.isButtonDisabled} /> 

をレンダリングでそれを使用しています。