React Semantic UI - Как отключить дочерний компонент на основе родительского - PullRequest
Новая
       21

React Semantic UI - Как отключить дочерний компонент на основе родительского

1 голос
/ 24 апреля 2019

Как отключить поле ввода здесь, в зависимости от того, был ли установлен флажок или нет?

Я проверил проверенное свойство - оно в рабочем состоянии (показывает истинные или ложные логические значения).Тем не менее, я не могу заставить отключенное свойство в Input работать.

Ниже мой код: 

import React from 'react';
import { Button, Checkbox, Input, List } from 'semantic-ui-react'
import PropTypes from 'prop-types';

const CategoryCheckBox = ({ type = 'checkbox', name, mylabel, checked, onChange }) => (
      <React.Fragment>
      <List horizontal relaxed>
        <List.Item>     
            <Checkbox style={{ paddingLeft:"1em", paddingBottom: "1em" }} label={mylabel} checked={checked} onChange={onChange} />
            <List.Content>

                <Input style={{ maxWidth:"9em", paddingLeft:"1em" }} size='mini' focus placeholder='Min' disabled={checked === true ? true : false} />
                <Input style={{ maxWidth:"9em", paddingLeft:"1em" }} size='mini' focus placeholder='Max'  />
            </List.Content>
        </List.Item>        

       </List>
      </React.Fragment>

);

CategoryCheckBox.propTypes = {
  type: PropTypes.string,
  name: PropTypes.string.isRequired,
  mylabel: PropTypes.string.isRequired,
  checked: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
}

export default CategoryCheckBox;

Из основной программы компонент вызывается со следующими параметрами: 

 <CategoryCheckBox name={item.value} mylabel={item.text} checked={this.state.checkedItems.get(item.value)} onChange={this.handleChange} />

Ниже приведен мой скриншот для компонентавместе с отладчиком React, показывающим проверенное значение.

screenshot for the component along with React debugger showing checked value

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

Попытался настроить большую частьважный код - новичок, чтобы отреагировать сам.Не удается получить index.js в рабочем состоянии.Но это дает вам хорошее представление о моем коде https://codesandbox.io/embed/2pyoxpr6rn?fontsize=14

Ответы [ 2 ]

1 голос
/ 24 апреля 2019

Изменения:

1- Вы не присваиваете имя элементу CheckBox в CategoryCheckBox, добавьте здесь имя: 

<Checkbox
  style={{ paddingLeft: "1em", paddingBottom: "1em" }}
  label={mylabel}

  // ↓↓↓↓↓↓↓↓ here
  name={name}
  checked={checked}
  onChange={onChange}
/>

2- Добавьте условие отключения для ввода макс.поле также: 

<Input
  style={{ maxWidth: "9em", paddingLeft: "1em" }}
  size="mini"
  focus
  placeholder="Max"

  // ↓↓↓↓↓↓↓↓ here
  disabled={!checked}
/>

3- Самое главное, вы храните данные в состояниях в компоненте App, поэтому он должен быть компонентом класса.

Проверка Рабочие коды и поле со всеми этими изменениями.

1 голос
/ 24 апреля 2019

После просмотра кода проблема связана с компонентом приложения.Ваш компонент приложения имеет состояние и поэтому не может быть функциональным компонентом без сохранения состояния.Ваш компонент приложения должен выглядеть примерно так: 

import React from "react";
import ReactDOM from "react-dom";
import { Checkbox, Label, Header, Card, Form, Button, Container, Icon, Step, Select, Dropdown, List } from 'semantic-ui-react';
import womensBoutiqueOptions from "./womensBoutiqueOptions";
import CategoryCheckBox from "./CategoryCheckBox";
import "./styles.css";

class App() extends React.Component {



    state = {
        date: new Date(),
        time: '10:00',
        checkedItems: new Map()
    }

    handleChange(e) {
      const item = e.target.name;
      const isChecked = e.target.checked;
      this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
    }

    render() {
    return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Form size="large" key="large">
                          <h4 className="ui dividing header">Womens Information</h4>

             <Form.Group widths='equal'>
                <Form.Field>
                     <React.Fragment>
                             <List horizontal >
                            {
                              womensBoutiqueOptions.map(item => (

                                <List.Item key={item.key}>
                                    <List.Content>

                                       <CategoryCheckBox name={item.value} mylabel={item.text} checked={this.state.checkedItems.get(item.value)} onChange={this.handleChange} />

                                  </List.Content> 
                                </List.Item>
                              ))
                            }
                          </List>
                    </React.Fragment>
                </Form.Field>
              </Form.Group>  
              </Form>        
            </div>
      )
    }
  );
}

Ознакомьтесь с реагирующей документацией , чтобы получить дополнительную информацию о том, почему

...