Javascript 基于用户输入的条件渲染

我刚刚开始学习React，正在努力进行条件渲染。我想基于表单输入呈现组件，但我不确定需要做什么或需要在哪里执行

我已经导入了我的表单组件，其中包含我想要使用的输入，并且还有另一个类似以下内容的组件：

import React, {Component} from 'react';
import Form from './Form';
import CardOne from './CardOne';
import CardTwo from './CardTwo';
import CardThree from './CardThree';

export default class CardContainer extends Component {
  render(){
    return (
      <div>
        <CardOne />
        <CardTwo />
        <CardThree />
     </div>
    )
  }
}

import React，{Component}来自'React'；
从“./Form”导入表单；
从“/CardOne”导入CardOne；
从“/cardtow2”导入cardtow2；
从“/cardtree”导入cardtree；
导出默认类CardContainer扩展组件{
render（）{
返回(
)
}
}

当表单提交时，如果输入值大于X，我基本上希望能够显示某些卡片，但我不知道如何针对导入的组件

这是我的表单组件：

export default class Form extends Component {
  state = {
    number: ''
  };

  change = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  onSubmit = e => {
    e.preventDefault();
    this.props.onSubmit(this.state);
    this.setState({
      number: ''
    })
  };

  render(){
    return (
      <form>
        <label>Number</label>
        <input
        type="number"
        name="number"
        placeholder="Number"
        value={this.state.number}
        onChange={e => this.change(e)} />

        <button onClick={e => this.onSubmit(e)}>Submit</button>
      </form>
    )
  }
}

导出默认类表单扩展组件{
状态={
编号：“”
};
变化=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
});
};
onSubmit=e=>{
e、 预防默认值（）；
this.props.onSubmit（this.state）；
这是我的国家({
编号：“”
})
};
render（）{
返回(
数
这个。更改（e）}/>
this.onSubmit（e）}>Submit
)
}
}

---

任何帮助都将不胜感激

我重新设计了您的表单组件，下面是我的代码。如果你在这方面遇到任何问题，请告诉我

import React，{Component}来自'React'；
从“/CardOne”导入CardOne；
从“/cardtow2”导入cardtow2；
从“/cardtree”导入cardtree；
导出默认类表单扩展组件{
状态={
编号：''，
真的,，
第二：错误，
第三：错误，
userInputValue:“”
};
变化=（e）=>{
这是我的国家({
userInputValue:e.target.value
});
};
onSubmit=e=>{
e、 预防默认值（）；
this.props.onSubmit（this.state）；
if（this.state.userInputValue>10&&this.state.userInputValue 20&&this.state.userInputValue<30）{
这是我的国家({
第三：是的，
})
}
};
render（）{
返回(
数
这个。更改（e）}/>
this.onSubmit（e）}>Submit
{this.state.showOne？
:
}
{this.state.showTwo？
:
}
{this.state.showThree？
:
}
)
}
}
//我上面写的是您的基本功能。您可以根据您的要求重新编辑条件。

这是我根据您的卡片呈现逻辑得出的结论。我没有改变组件的形式，而是在容器上工作

导出默认类CardContainer扩展组件{
建造师（道具）{
超级（道具）；
状态={
编号:0，
}
this.onFormSubmit=this.onFormSubmit.bind（this）；
}
onFormSubmit=（数字）=>{
this.setState（{number:number}）；
}
render（）{
let i=数学楼层（本州编号/10）
返回(
this.onFormSubmit（number）}
[，].slice（0，i）.map（卡=>
{card}
)
)
}
}

对于此类问题，我会使用渲染道具。您可以研究更多关于渲染道具的内容，但基本上您的CardContainer组件不会像现在这样静态地渲染这些卡片组件。它将返回props.children

然后您将有一个函数（即函数TestX），它将有一个条件来检查X的值是多少。这是一个函数，根据X是什么返回。函数TestX将从CardContainer接收道具，包括从状态读取的X值

---

因此，我将使用CardContainer组件作为其子组件。

我可以在这方面提供帮助。但是我需要更多的澄清，我所理解的是，例如：如果用户类型1表示u需要显示一个卡片组件，如果用户类型2表示CardTwo组件。。如果我错了，请纠正我。取决于用户输入，您将正确显示卡组件？你必须把你的表格放在某个地方，

CardsContainer

也许吧。此外，从这些评论中可以看出，过滤卡的逻辑并不清楚。你能再解释一下吗？如果含糊不清的话，我很抱歉！我的意思是，如果有人输入，例如，“10”，cardOne就会显示。如果他们输入“20”，则显示cardsOne和Cardswo。我希望这能让事情变得更清楚一点！是10的倍数吗？如果我输入100呢？谢谢，非常感谢！我刚试过，但它不允许我在输入中输入数字…请将这一行-->value={this.state.number}更改为--value={this.state.userInputValue}真的感谢它！这就是我一直在寻找的基本功能！谢谢你！我还处于学习React的早期阶段，所以一定会研究如何渲染道具！