Как включить/отключить кнопку при выборе переключателя?

Question

Я новый, чтобы реагировать. В настоящее время в моем приложении я хочу включить и отключить кнопку при выборе переключателя. Ниже мой код:

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

Вы должны использовать состояние, иначе страница не будет rerendered.

Так 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} /> 

Вы должны определенно пройти через oficial intro tutorial.