Условный рендеринг на основе пользовательского ввода - PullRequest
Новая
       11

Условный рендеринг на основе пользовательского ввода

0 голосов
/ 02 июня 2018

Я только начал изучать 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>
    )
  }
}

Любая помощь будет высоко оценена!

Ответы [ 3 ]

0 голосов
/ 02 июня 2018

Это то, что я придумал, следуя вашей логике рендеринга карт.Я не менял компонент формы, а работал над контейнером 

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>
    )
  }
}
0 голосов
/ 02 июня 2018

Я бы использовал render prop для такого рода проблем.Вы можете больше изучить реквизит рендеринга, но в основном ваш компонент CardContainer не будет рендерить эти компоненты карт статически.Вместо этого он вернет props.children.

И тогда у вас будет функция (т. Е. Функция TestX), которая будет иметь условное выражение для проверки значения X.Это функция, которая будет возвращать либо, в зависимости от того, что X.Функция TestX будет получать реквизиты от CardContainer, включая значение X, считываемое из состояния.

Так что я просто буду использовать компонент CardContainer с его дочерним элементом.

0 голосов
/ 02 июня 2018

Я переработал ваш компонент формы, ниже мой код.,Дайте мне знать, если у вас возникли какие-либо вопросы по этому поводу. 

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 .
...