如何仅为一个输入设置onclick方法？答案

【问题标题】：How to onclick method set for only one input?如何仅为一个输入设置onclick方法？
【发布时间】：2023-03-23 21:33:01
【问题描述】：

首先请click为SS。

现在我有 2 个输入，其值为 credit-card 和 paypal。

我为 CreditCard 设置了一个 onClick 事件来提供信用卡信息。它工作正常，但问题是：

当我点击 paypal 输入时，卡的详细信息不会消失。只要我再次单击 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
}

【问题讨论】：

标签： reactjs input onclick onchange setstate

【解决方案1】：

您的handleClick 方法错误。 setState 方法是异步的，它会尝试分批执行，这意味着之前的值可能还没有更新。

改成

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

见State Updates May Be Asynchronous

【讨论】：

我觉得我无法理解。如果我点击 Credit Cart 输入，甚至是你和我的；信息出现和消失没有问题。问题是在第一次出现信息后，即使用户点击贝宝输入它也必须消失。（Kisacasi cart info bilgileri geldikten sonra paypal'a bile tiklansa yok olmasini istiyorum. Ama suan credit cart'a tiklamadigim Surece yok olmuyor。）跨度>

【解决方案2】：

我认为以下内容应该适合您...

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

【讨论】：