Js: 如何在单击时附加组件？

我是新来的，我对一些基本的东西感到困惑。

在呈现 DOM 之后，我需要在 click 事件上向 DOM 追加一个组件。

我最初的尝试如下，但是没有成功。但这是我能想到的最好的办法了。(事先为将 jQuery 与 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>
);
}
};

希望我需要做的事情已经很清楚了，我希望你能帮助我找到一个合适的解决方案。

164042 次浏览
小开

在使用 React 时，不要使用 jQuery 来操作 DOM。React 组件应该呈现一个 代表，它们应该是什么样子的，给定一个特定的状态; DOM 转换成什么样子由 React 自己处理。

您想要做的是将“决定呈现什么的状态”存储在链的上层，并将其传递下去。如果呈现的是 n子级，那么该状态应该由包含组件的任何内容“拥有”。例如:

class AppComponent extends React.Component {
state = {
numChildren: 0
}


render () {
const children = [];


for (var i = 0; i < this.state.numChildren; i += 1) {
children.push(<ChildComponent key={i} number={i} />);
};


return (
<ParentComponent addChild={this.onAddChild}>
{children}
</ParentComponent>
);
}


onAddChild = () => {
this.setState({
numChildren: this.state.numChildren + 1
});
}
}


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


const ChildComponent = props => <div>{"I am child " + props.number}</div>;
小开
最佳答案

正如@Alex McMillan 所提到的，使用 state 来指定在 Dom 中应该呈现什么。

在下面的例子中，我有一个输入字段，我想在用户单击按钮时添加第二个输入字段，onClick 事件处理程序调用 handleAddSecond Input () ，它将 inputLinkClick 更改为 true。我使用一个三元运算符来检查真实状态，它呈现第二个输入字段

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

提交答案