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

Question

如何在此处禁用输入框，具体取决于是否已选中复选框？

我已经验证了checked属性 - 它处于工作状态（显示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调试器。

任何帮助将受到高度赞赏。

试图建立大部分重要的代码 - 新手来反应自己。无法在工作顺序中获取index.js。但它让你很好地了解我的代码https://codesandbox.io/embed/2pyoxpr6rn?fontsize=14

Answer 1

变化：

1-您没有在CheckBox中为CategoryCheckBox元素指定名称，请在此处添加名称：

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

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

2-还为Max输入字段添加禁用条件：

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

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

3-最重要的是，您将数据存储在App组件中的状态中，因此它需要是一个类组件。

检查Working Codesandbox所有这些变化。

Answer 2

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

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以获取有关原因的更多信息