基于用户输入的条件渲染

Posted 2023-02-22

【中文标题】基于用户输入的条件渲染

【英文标题】：Conditional rendering based on user input

【发布时间】：2018-11-12 11:18:18

【问题描述】：

我刚刚开始学习 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>
    )
  

如果在提交表单时输入的值大于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>
    )
  

我们将不胜感激任何帮助！

【问题讨论】：

我可以帮忙。 .但我需要更多说明

我的理解是，例如：如果用户类型 1 意味着你需要显示一个卡片组件，如果用户类型 2 意味着 CardTwo 组件.. 如果我错了，请纠正我。 .取决于用户输入，您将显示 Card 组件对吗？ ?

您必须在某处合并您的表单，CardsContainer 可能。除此之外，过滤卡的逻辑并不清晰，从这些 cmets 可以看出。你能补充一些解释吗？

很抱歉，如果它含糊不清！我的意思是，如果有人输入例如“10”，cardOne 就会显示。如果他们输入“20”，就会显示cardsOne 和cardTwo。我希望这能让它更清楚一点！

是 10 的倍数吗？如果我输入 100 会怎样？

【参考方案1】：

我会使用渲染道具来解决这类问题。您可以研究更多有关渲染道具的信息，但基本上您的 CardContainer 组件不会按原样静态渲染这些卡片组件。它将返回 props.children 。

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

所以我将只使用 CardContainer 组件作为它的子组件。

【讨论】：

谢谢！我还处于学习 React 的早​​期阶段，所以一定会研究如何渲染道具！

【参考方案2】：

这是我按照您的卡片渲染逻辑提出的。我没有更改表单组件，而是在容器上工作

export default class CardContainer extends Component 
   constructor(props) 
    super(props);
    state = 
       number: 0,
    
    this.onFormSubmit = this.onFormSubmit.bind(this);
  
   onFormSubmit=(number)=>
     this.setState( number: number );
   
  
  render()
    let i=Math.floor(this.state.number/10) 
    return (
      <div>
        <Form onSubmit=() => this.onFormSubmit(number)
        [<CardOne />, <CardTwo />, <CardThree/>].slice(0,i).map(card => 
            card 
        )
     </div>
    )
  

【参考方案3】：

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

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

export default class Form extends Component 
  state = 
    number: '',
    showOne:true,
    showTwo:false,
    showThree:false,
    userInputValue:''
  ;

  change = (e) => 
    this.setState(
      userInputValue: e.target.value
    );
  ;

  onSubmit = e => 
    e.preventDefault();
    this.props.onSubmit(this.state);
    if (this.state.userInputValue > 10 && this.state.userInputValue <20 )
      this.setState(
        showTwo: true,
      )
    
    if (this.state.userInputValue > 20 && this.state.userInputValue < 30) 
      this.setState(
        showThree: true,
      )
    
  ;

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

        <button onClick=e => this.onSubmit(e)>Submit</button>
      </form>
      <div>
      this.state.showOne ? 
            <CardOne />
       :
       <div></div>
      
      this.state.showTwo ?
        <CardTwo />
        :
        <div></div>
      
      this.state.showThree ?
        <CardThree />
        :
        <div></div>
      
      </div>
      </div>
    )
  


// What i wrote above is your base functionality . You reedit the condition depends on ur requirement .

【讨论】：

谢谢，非常感谢！我刚试了一下，它不允许我在输入中输入数字...

请将此行 --> value=this.state.number 改为 --- value=this.state.userInputValue

真心欣赏！这就是我一直在寻找的基本功能！谢谢