如何啓用/禁用選擇單選按鈕的按鈕？

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

您應該使用狀態，否則頁面不會被重新描繪。

所以的onClick或的onChange事件中，你需要更新狀態

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

只需添加到您的<Field />組件onClick={this.setButtonDisability}或onChange={this.setButtonDisability}。

，然後用它在渲染功能

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

你應該definitly經歷一個oficial intro tutorial。