React.js：如何在点击时添加组件？ [英] React.js: How to append a component on click?

问题描述

我是React的新手，我对某种基本知识感到困惑。

I'm new to React and I'm puzzled on something kind of basic.

在渲染DOM之后，我需要向DOM追加一个组件，

I need to append a component to the DOM after the DOM is rendered, on a click event.

我最初的尝试如下，但它不起作用。但这是我想尝试的最好的方法。 （预先为将jQuery与React混合使用而道歉。）

My initial attempt is as follows, and it doesn't work. But it's the best thing I've thought to try. (Apologies in advance for mixing jQuery with React.)

    ParentComponent = class ParentComponent extends React.Component {
      constructor () {
        this.addChild = this.addChild.bind(this);
      }

      addChild (event) {
        event.preventDefault();
        $("#children-pane").append(<ChildComponent/>);
      }

      render () {
        return (
          <div className="card calculator">
            <p><a href="#" onClick={this.addChild}>Add Another Child Component</a></p>
            <div id="children-pane">
              <ChildComponent/>
            </div>
          </div>
        );
      }
    };

希望我已经清楚需要做什么，希望您能帮助我找到适当的解决方案。

Hopefully it's clear what I need to do, and I hope you can help me attain an appropriate solution.

推荐答案

如@Alex McMillan所述，请使用state指示应在dom中呈现的内容。

As @Alex McMillan mentioned, use state to dictate what should be rendered in the dom.

在下面的示例中，我有一个输入字段，当用户单击按钮时，我想添加第二个字段，onClick事件处理程序调用handleAddSecondInput（），它将inputLinkClicked更改为true。我正在使用三元运算符来检查真实状态，该状态会呈现第二个输入字段

In the example below I have an input field and I want to add a second one when the user clicks the button, the onClick event handler calls handleAddSecondInput( ) which changes inputLinkClicked to true. I am using a ternary operator to check for the truthy state, which renders the second input field

class HealthConditions extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      inputLinkClicked: false
    }
  }

  handleAddSecondInput() {
    this.setState({
      inputLinkClicked: true
    })
  }


  render() {
    return(
      <main id="wrapper" className="" data-reset-cookie-tab>
        <div id="content" role="main">
          <div className="inner-block">

            <H1Heading title="Tell us about any disabilities, illnesses or ongoing conditions"/>

            <InputField label="Name of condition"
              InputType="text"
              InputId="id-condition"
              InputName="condition"
            />

            {
              this.state.inputLinkClicked?

              <InputField label=""
                InputType="text"
                InputId="id-condition2"
                InputName="condition2"
              />

              :

              <div></div>
            }

            <button
              type="button"
              className="make-button-link"
              data-add-button=""
              href="#"
              onClick={this.handleAddSecondInput}
            >
              Add a condition
            </button>

            <FormButton buttonLabel="Next"
              handleSubmit={this.handleSubmit}
              linkto={
                this.state.illnessOrDisability === 'true' ?
                "/404"
                :
                "/add-your-details"
              }
            />

            <BackLink backLink="/add-your-details" />

          </div>
         </div>
      </main>
    );
  }
}

这篇关于React.js：如何在点击时添加组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！