How to change a text inside an element, corresponding to an onClick event in ReactJs?

问题

I am displaying two divisions corresponding, to two button's onClick event:

class Home extends React.Component {

    constructor() {
        super();
        this.state = {
            isShowaMale: false
        };
        this.toggleShowMale = this.toggleShowMale.bind(this);
    }

    toggleShowMale(show) {
        this.setState({ isShowaMale:show });
    }

    render() {

        const { isShowaMale } = this.state;

        return (
            <div className="container py-5">

                <div className="row">
                    <button className="btn col-6 bg-transparent col-12 col-sm-6" onClick={() => this.toggleShowMale(true)}  >
                        <img className="humanbody profile" src={malebody} />
                    </button>
                    <button className="btn col-6 bg-transparent col-12 col-sm-6" onClick={() => this.toggleShowMale(false)}  >
                        <img className="humanbody profile" src={femalebody} alt="" />
                    </button>
                </div>

                
                {/* Hidden div */}
                <div className="row mx-auto">
                    {isShowaMale && (
                        <div className="mx-auto">
                            Hey man!
                        </div>
                    )}
                    {!isShowaMale && (
                        <div>
                            Hey woman!
                        </div>
                    )}
                </div>
                {/* Hidden div */}
            </div>
        )
    }
}

export default Home;

But, can I just display one div and change just the word man and woman in the text Hey ____? And there is also a problem that, after reloading the web page, it always shows Hey woman due to isShowaMale: false being default state. How can I solve these?

回答1:

Can I just display one div and change just the word man and woman in the text Hey ____

   <div className="row">
      {`Hey ${isShowMan? " man" : "woman"}!`} 
    </div>

And there is also a problem that, after reloading the web page, it always shows Hey woman due to isShowaMale: false being the default state.

You can think about localStorage

Due to Why are we disallowed to use HTML5 local storage on code snippets?

So you can test the live demo

constructor() {
 super();
 const isShow = window.localStorage.getItem("data");
 this.state = { isShowMan: isShow === "false" || !isShow ? false : true };
}

toggleShowMan(isShow) {
  window.localStorage.setItem("data", isShow);
  this.setState({ isShowMan: isShow });
}

class Home extends React.Component {
    constructor() {
    super();
    this.state = { isShowMan: true };
  }

  toggleShowMan(isShow) {
    this.setState({ isShowMan: isShow });
  }

  render() {
    const { isShowMan } = this.state;

   return (
      <div className="container py-5">
        <div className="row">
          <button
            disabled={isShowMan}
            className="btn col-6 bg-transparent col-12 col-sm-6"
            onClick={() => this.toggleShowMan(true)}
          >
            malebody{" "}
          </button>
          <button
            disabled={!isShowMan}
            className="btn col-6 bg-transparent col-12 col-sm-6"
            onClick={() => this.toggleShowMan(false)}
          >
            femalebody
          </button>
        </div>

        <div className="row">
          {`Hey ${isShowMan? " man" : "woman"}!`} 
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Home />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

回答2:

[UPDATE] following further clarification in the comments, the issue can be handles in a way similar to this:

class Home extends React.Component {
    constructor() {
        super();
        this.state = {
            isShowaMale: false
        };
        this.toggleShowMale = this.toggleShowMale.bind(this);
    }

    toggleShowMale(show) {
        this.setState({ isShowaMale:show });
    }

  render() {
    const formProps = this.state.isShowMale
      ? { title: 'Mr', name: 'John', surname: 'Doe' }
      : { title: 'Ms', name: 'Jane', surname: 'Doe' };

    return (
      <div className="container py-5">
        <div className="row">
          <button className="btn col-6 bg-transparent col-12 col-sm-6" onClick={()=> this.toggleShowMale(true)} >
            <img className="humanbody profile" src={malebody} />
          </button>
          <button className="btn col-6 bg-transparent col-12 col-sm-6" onClick={()=> this.toggleShowMale(false)} >
            <img className="humanbody profile" src={femalebody} alt="" />
          </button>
        </div>


        {/* Hidden div */}
        <div className="row mx-auto">
          <div className="mx-auto">
            <form>
              <input type="text" id="title" name="title" placeholder={formProps.title} />
              <input type="text" id="name" name="name" placeholder={formProps.title} />
              <input type="text" id="surname" name="surname" placeholder={formProps.title} />
            </form>
          </div>
        </div>
        {/* Hidden div */}
      </div>
    )
  }
}

export default Home;

Or the entire form can be placed into a separate function (or even a separate component).

[ORIGINAL ANSWER]

You simply replace

{/* Hidden div */}
<div className="row mx-auto">
  {isShowaMale && (
  <div className="mx-auto">
    Hey man!
  </div>
  )}
  {!isShowaMale && (
  <div>
    Hey woman!
  </div>
  )}
</div>
{/* Hidden div */}

with

{/* Hidden div */}
<div className="row mx-auto">
  <div className="mx-auto">
    Hey {isShowaMale ? 'man' : 'woman'}!
  </div>
</div>
{/* Hidden div */}

来源：https://stackoverflow.com/questions/65991016/how-to-change-a-text-inside-an-element-corresponding-to-an-onclick-event-in-rea

标签

javascript

reactjs