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

我们将非常感谢您的帮助。

试图设置大多数重要代码-新手来对自己进行反应。无法按工作顺序获取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-您没有为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组件中的状态中，因此它必须是一个类组件。

检查Working Codesandbox并进行所有这些更改。

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

2 个答案: