如何僅爲一個輸入設置onclick方法？

現在我有2個輸入，其值爲credit-card和paypal。

我設置onClick事件的信用卡式提供卡informations.It工作正常，但問題是：

卡細節不`噸消失，當我點擊貝寶輸入。只要我再次點擊CreditCart輸入，它就可以工作。我想讓它消失，即使我點擊貝寶輸入。我的意思是卡片的細節應該只能通過點擊信用卡輸入。

class CreditCart extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = {show:false}; 

    this.handleClick = this.handleClick.bind(this); 
} 
handleClick() { 
    this.setState({ show : !this.state.show}) 


} 
    render() { 
    return (
    //2 input here credir-cart has onClick 


     {this.state.show && <CreditCart/> 


    }

第二部件包括車信息部分：

class CreditCart extends React.Component { 
constructor(props) { 
    super(props); 
} 
render() { 
// information part 
}

來源

2017-08-18 Anıl Selvi

你方法是錯誤的。 setState方法是異步的，它會嘗試批量執行它，這意味着以前的值可能還沒有更新。

將其更改爲

handleClick() { 
    this.setState(function (prevState, props) { 
     return { 
      show: !prevState.show 
     }; 
    }); 
}

見State Updates May Be Asynchronous

來源

2017-08-18 14:31:55

我想我可能沒有足夠的理解。即使你是我的，如果我點擊信用卡輸入;信息出現和消失沒有問題。事情是在第一次信息出現後，即使用戶點擊paypal輸入它也必須消失。（Kisacasi cart info bilgileri geldikten sonra paypal'a bile tiklansa yok olmasini istiyorum。Ama suan credit cart'a tiklamadigim surece yok olmuyor。） –

我認爲像下面應該爲你工作...

class SomeComponent extends Component { 
    constructor() { 
     this.state = { 
      toggle: false 
     }; 
    } 

    render() { 
     return (
      <div> 
       {this.state.toggle 
        ? <CreditCardComponent /> 
        : <PaypalComponent />} 
       <button 
        onClick={e => this.setState({ toggle: !this.state.toggle })} 
       > 
        Toggle 
       </button> 
      </div> 
     ); 
    } 
}

來源

2017-08-18 14:41:59

如何僅爲一個輸入設置onclick方法？

回答

相關問題