React Semantic UI - 如何禁用基于父组件的子组件

Question

这里如何根据复选框是否被选中来禁用输入框？

我已验证已检查的属性 - 它处于工作状态（显示 true 或 false 布尔值）。但是，我似乎无法让 Input 中的 disabled 属性工作。

下面是我的代码：

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 调试器。

任何帮助将不胜感激。

尝试设置大部分重要代码 - 新手自己 React。无法在工作订单中获取 index.js。但它让您对我的代码有了一个很好的了解 https://codesandbox.io/embed/2pyoxpr6rn?fontsize=14

Answer 1

查看您的代码后，问题出在您的应用程序组件上。您的应用程序组件具有状态，因此不能成为无状态的功能组件。您的 App 组件应如下所示。

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

查看 react documentation 了解有关原因的更多信息

Answer 2

变化：

1- 您没有将名称分配给 CategoryCheckBox 中的 CheckBox 元素，请在此处添加名称：

<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 组件的状态中，因此它需要是一个 class 组件。

检查 Working Codesandbox 所有这些更改。

React Semantic UI - 如何禁用基于父组件的子组件

React Semantic UI - How to disable a child component based on parent

reactjs

semantic-ui-react