Javascript 在单击时渲染组件

当我们点击“添加”链接时，我正试图呈现所需组件。 以下是我的主要组件代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Hand } from './hand.js';
import { Need } from './need.js';

class App extends React.Component{
  constructor() {
    super();
    this.processHand = this.processHand.bind(this);
    this.addNeed = this.addNeed.bind(this);
    this.state = {
      inhandMoney : " ",
      renderNeed: false,
    }

  }

  processHand(e){
    e.preventDefault();
    const handMoneyReceived = this.handMoney.value;
    this.setState({
        inhandMoney: handMoneyReceived
    });     
  }

  addNeed(e){
    e.preventDefault();
    this.setState({
        renderNeed:true
    });
  }

  render(){ 

    const passNeed = (    
            <Need/>   
      );

    return(
        <div>
          <div className ="hand">
            <form onSubmit = {this.processHand}>
              <input type="text" ref= {ref => this.handMoney = ref}/>
              <input type="submit"/>
            </form>
            <Hand handMoney = {this.state.inhandMoney}/>
            <Need/>
          </div>
          {this.state.renderNeed ? passNeed : null}
          <a href="#" className="add" onClick = {this.addNeed}>add</a>
        </div>
      )
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

从“React”导入React；
从“react dom”导入react dom；
从'/Hand.js'导入{Hand}；
从“/Need.js”导入{Need}；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.processHand=this.processHand.bind（this）；
this.addNeed=this.addNeed.bind（this）；
此.state={
在韩币：“，
渲染：错误，
}
}
处理手（e）{
e、 预防默认值（）；
const handMoneyReceived=this.handMoney.value；
这是我的国家({
手上的钱：收到的手上的钱
});     
}
补充需求（e）{
e、 预防默认值（）；
这是我的国家({
真的
});
}
render（）{
常数passNeed=（
);
返回(
this.handMoney=ref}/>
{this.state.renderNeed？passNeed:null}
)
}
}
ReactDOM.render（，document.getElementById（'container'））；

以下是我的需求组件，以备不时之需：

import React from 'react';

export class Need extends React.Component{
constructor() {
    super();
    this.processNeed = this.processNeed.bind(this);
    this.state ={
        why: " ",
        howMuch: 0
    }

}

processNeed(e){
    e.preventDefault();
    const why=this.why.value;
    const howMuch=this.howMuch.value;
    this.setState({
        why:why,
        howMuch:howMuch
    });
}

    render(){
        return(
          <div className ="need">
            <form onSubmit = {this.processNeed}>
              <input type="text" ref= {ref => this.why = ref}/>
              <input type="text" ref= {ref => this.howMuch = ref}/>
              <input type="submit"/>
            </form>
            <div>
                <h1>{this.state.why}</h1>
                <h1>{this.state.howMuch}</h1>
            </div>
          </div>            
        )
    }
}

从“React”导入React；
导出类需要扩展React.Component{
构造函数（）{
超级（）；
this.processNeed=this.processNeed.bind（this）；
这个州={
为什么，
多少钱：0
}
}
处理需要（e）{
e、 预防默认值（）；
const why=this.why.value；
const howmole=这个.howmole.value；
这是我的国家({
为什么:为什么,，
多少钱
});
}
render（）{
返回(
this.why=ref}/>
this.howmount=ref}/>
{这个州，为什么}
{这个州。多少钱}
)
}
}

我正在实现我在第一次单击添加链接时试图实现的目标，即，首先需要组件在没有任何条件的情况下呈现。当我单击“添加”时，需要组件再次呈现，但当我第二次单击“添加”链接时，我看不到任何更改。为什么会这样，我想在每次单击“添加”链接时呈现所需组件

取代

 {this.state.renderNeed && <Need/> }

{this.state.renderned&&}

取代

 {this.state.renderNeed && <Need/> }

{this.state.renderned&&}

试试：

试试：

1）实现这一目标的一种方法是：

addNeed(e){
  e.preventDefault();
  this.setState({
      needKey: Math.random()
  });
}

在渲染中，可以添加此键：

<Need key={this.state.needKey} /> 

3） 此外，还可以使用forceUpdate完成。但是，一般不建议：

addNeed(e) {
  e.preventDefault();
  this.forceUpdate()
}

1） 实现这一目标的一个方法是：

addNeed(e){
  e.preventDefault();
  this.setState({
      needKey: Math.random()
  });
}

在渲染中，可以添加此键：

<Need key={this.state.needKey} /> 

3） 此外，还可以使用forceUpdate完成。但是，一般不建议：

addNeed(e) {
  e.preventDefault();
  this.forceUpdate()
}

---

我将创建一个带有空数组的初始状态键，每次单击“添加”都会增加数组的大小，然后在render（）处映射数组。大概是这样的：

constructor() {
super();
  this.processHand = this.processHand.bind(this);
  this.addNeed = this.addNeed.bind(this);
   this.state = {
    inhandMoney : " ",
    fields: [],
   }
}

addNeed(e){
  e.preventDefault();
  this.setState({
    fileds: this.state.fields.push(1),
  });
}

render() {
  <div>
    <div className="hand">
      <form onSubmit={this.processHand}>
        <input type="text" ref={ref => this.handMoney = ref}/>
        <input type="submit"/>
      </form>
      <Need/>
    </div>
    {this.state.fields.map(i => <Need key={i} />)}
    <a href="#" className="add" onClick={this.addNeed}>add</a>
  </div>
}

constructor（）{
超级（）；
this.processHand=this.processHand.bind（this）；
this.addNeed=this.addNeed.bind（this）；
此.state={
在韩币：“，
字段：[]，
}
}
补充需求（e）{
e、 预防默认值（）；
这是我的国家({
fileds:this.state.fields.push（1），
});
}
render（）{
this.handMoney=ref}/>
{this.state.fields.map（i=>）}
}

我会创建一个带有空数组的初始状态键，每次单击“添加”都会增加数组的大小，然后在render（）处映射数组。大概是这样的：

constructor() {
super();
  this.processHand = this.processHand.bind(this);
  this.addNeed = this.addNeed.bind(this);
   this.state = {
    inhandMoney : " ",
    fields: [],
   }
}

addNeed(e){
  e.preventDefault();
  this.setState({
    fileds: this.state.fields.push(1),
  });
}

render() {
  <div>
    <div className="hand">
      <form onSubmit={this.processHand}>
        <input type="text" ref={ref => this.handMoney = ref}/>
        <input type="submit"/>
      </form>
      <Need/>
    </div>
    {this.state.fields.map(i => <Need key={i} />)}
    <a href="#" className="add" onClick={this.addNeed}>add</a>
  </div>
}

constructor（）{
超级（）；
this.processHand=this.processHand.bind（this）；
this.addNeed=this.addNeed.bind（this）；
此.state={
在韩币：“，
字段：[]，
}
}
补充需求（e）{
e、 预防默认值（）；
这是我的国家({
fileds:this.state.fields.push（1），
});
}
render（）{
this.handMoney=ref}/>
{this.state.fields.map（i=>）}
}

如果您想继续呈现需求的集合，您可能需要在您所在的州存储一个可以跟踪您需求的数组

否则，根据此报价-

首先，需要组件在没有任何条件的情况下呈现。当我单击“添加”时，需要组件将再次呈现，但当我第二次单击“添加”链接时，我看不到任何更改

您似乎希望根据已渲染的布尔值跟踪的更改进行渲染

默认情况下，调用setState将重新启动组件，无论您将什么有效参数传递给setState。所以是的，它应该重新招标。它似乎没有重新渲染，因为它总是在第一次单击后显示相同的内容，因为每次单击后“渲染”总是为真

这是一个很好的资源：

作为一个人为的例子，如果你真的想“重新渲染”你的组件，你可以做一些琐碎的事情，比如为渲染创建一个切换

  addNeed(e){
    e.preventDefault();
    this.setState((prevState, props) => ({
        renderNeed: !prevState.renderNeed
    });
  }

不建议您这样做，因为您的addNeed函数并没有按照其名称所建议的那样执行

还有一个小提琴，以证明它是重新渲染

---

希望这能有所帮助。

如果您想继续呈现需求的集合，您可能希望在您的状态下存储一个数组，以跟踪您的需求

否则，根据此报价-

首先，需要组件在没有任何条件的情况下呈现。当我单击“添加”时，需要组件将再次呈现，但当我第二次单击“添加”链接时，我看不到任何更改

您似乎希望根据已渲染的布尔值跟踪的更改进行渲染

默认情况下，调用setState将重新启动组件，无论您将什么有效参数传递给setState。所以是的，它应该重新招标。没有

div 
 |- div (class=hand)
      |-form
        |-input (type=text) 
        |-input (type=submit)
      |- Hand
      |- Need
 |-Need (added by clicking on add anchor tag)
 |-Need (added by clicking on add anchor tag)
 |-Need (added by clicking on add anchor tag)
 |-Need (added by clicking on add anchor tag)
 |-a (class=add)