Question

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

我已经导入了我想要使用的输入的Form组件，并且有另一个组件：

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

任何帮助都将受到大力赞赏！

Answer 1

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

＆＃13;

gulp.watch('src/assets/themes/base/*.less', gulp.series('less'));

＆＃13;

Answer 2

这是我按照你的卡片渲染逻辑提出的。我没有改变Form coponent，而是改进了Container

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

Answer 3

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

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

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

基于用户输入的条件渲染

3 个答案: