React：如何使用 React Hooks 在 Function 组件中添加 onChange 功能？需要来自复选框的 onClick 事件来影响输入状态

Question

我有一个带有复选框和输入的功能组件。我正在尝试为复选框创建一个 onChange 函数，该函数通过实现useState React Hook 来清除输入并在用户单击它时禁用它。有没有人有任何以前做过类似事情的 Hooks 经验？我正在尝试查看代码示例以更好地解决这个问题，因为我还是 React Hooks 的新手

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import {
  Col, Row, Icon, Input, Tooltip
} from 'antd'
import Checkbox from '../elements/Checkbox'

const CustomerDetails = ({ customer }) => {
  if (customer === null) {
    return (
      <Container>
        <Row>
          <Col span={24}>
            <ErrorContainer>
              <Icon type="exclamation-circle" />
            </ErrorContainer>
          </Col>
        </Row>
      </Container>
    )
  }

  return (
    <Container>
      <h2>{customer.contact.name}</h2>
      <Row>
        <Col span={8}>
          <H3>
            <strong>Primary Contact:</strong>
          </H3>
          <P>{customer.contact.name}</P>
          <P>{customer.contact.phone}</P>
        </Col>
        <Col span={8}>
          <H3>
            <strong>Service Address:</strong>
          </H3>
          <P>{customer.site.address1}</P>
          <P>{customer.site.address2}</P>
          <P>
            {customer.site.city},&nbsp;{customer.site.state}&nbsp;
            {customer.site.postalCode}
          </P>
        </Col>
        <Col span={8}>
          <H3>
            <strong>Billing Address:</strong>
          </H3>
          <P>{customer.account.billingStreet}</P>
          <P>
            {customer.account.billingCity},&nbsp;{customer.account.billingState}
            &nbsp;
            {customer.account.billingPostalCode}
          </P>
        </Col>
      </Row>
      <br />
      <Row>
        <Col span={10}>
          <h4>
            PRIMARY CONTACT EMAIL &nbsp;
            <Tooltip
              placement="topRight"
              title={primaryContact}
            >
              <StyledTooltipIcon
                type="question-circle"
                theme="filled"
              />
            </Tooltip>
          </h4>
        </Col>
      </Row>
      <Row>
        <Col span={8}>
          <StyledInput value={customer.contact.email} />
        </Col>
        <Col span={2} />
        <Col span={8}>
          <StyledCheckbox /> EMAIL OPT OUT{' '}
          <Tooltip
            placement="topRight"
            title={emailText}
          >
            <StyledTooltipIcon
              type="question-circle"
              theme="filled"
            />
          </Tooltip>
        </Col>
      </Row>
    </Container>
  )
}

CustomerDetails.propTypes = {
  customer: PropTypes.object
}

CustomerDetails.defaultProps = {
  customer: {}
}

const Container = styled.div`
  text-align: left;
`
const StyledCheckbox = styled(Checkbox)`
  input + span {
    border-radius: 0px;
    width: 35px;
    height: 35px;
    border: 2px solid ${({ theme }) => theme.colors.black};
    background-color: transparent;
    color: ${({ theme }) => theme.colors.black};
    border-color: ${({ theme }) => theme.colors.black};
    transition: none;
  }

  input:checked + span {
    border: 2px solid ${({ theme }) => theme.colors.black};
    width: 30px;
    height: 30px;
  }

  input + span:after {
    border-color: ${({ theme }) => theme.colors.black};
    left: 20%;
    transition: none;
    width: 12.5px;
    height: 20px;
  }

  input:disabled + span:after {
    border-color: ${({ theme }) => theme.colors.gray};
  }

  input:not(:checked):hover + span:after {
    border-color: ${({ theme }) => theme.colors.gray};
    opacity: 1;
    transform: rotate(45deg) scale(1) translate(-50%, -50%);
  }

  input:focus + span {
    border-color: ${({ theme }) => theme.colors.primary};
  }
`

const StyledInput = styled(Input)`
  max-width: 100%;

  &&& {
    border: 2px solid ${({ theme }) => theme.colors.black};
    border-radius: 0px;
    height: 35px;
  }
`

const ErrorContainer = styled.div`
  /* margin-left: 25%; */
`

const StyledTooltipIcon = styled(Icon)`
  color: #1571da;
`

const H3 = styled.h3`
  white-space: nowrap;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5;
}
`

const H4 = styled.h4`
  text-decoration: underline;
  color: #1590ff;
`

const P = styled.p`
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
`

export default CustomerDetails

Answer 1

您可以使用useState 挂钩创建一个状态变量，用于跟踪用户是否单击了复选框以禁用其他输入。 useState hook 是一个函数，它接受一个初始值并返回一个状态变量和一个用于更新该状态变量值的函数（其工作方式与 setState 几乎相同，但仅适用于单个状态变量）。

例如：

const [x, setX] = React.useState(1); // `x` is initially 1, but that will change on later renders

setX(prevX => prevX + 1); // increments `x` for the next render;

您还需要创建一个事件处理函数来响应单击此复选框。

这是一个完整的例子：

import React from "react";

const MyComponent = props => {
    const [disableInputIsChecked, setDisableInputIsChecked] = React.useState(false);
    const [inputValue, setInputValue] = React.useState("");

    function clearInput() {
        setInputValue("");
    }

    function handleInputChange(event) {
        setInputValue(event.target.value);
    }

    function handleCheckboxClick(event) {
        if (!disableInputIsChecked) { // this click was to check the box
            clearInput();
        }
        setDisableInputIsChecked(prevValue => !prevValue); // invert value
    }

    return (
        <form>
            <input type="checkbox" value={ disableInputIsChecked } onChange={ handleCheckboxClick }/>
            <input type="text" value={ inputValue } onChange={ handleInputChange } disabled={ disableInputIsChecked }/>
        </form>
    )
}

这是working example。

您可能想为这些值想出更好的名称，但希望您能理解这里的意思。