web-dev-qa-db-ja.com

React：Reactフックを使用して、関数コンポーネント内でonchange機能を追加する方法？入力状態に影響を与えるためにチェックボックスからOnClickイベントが必要

チェックボックスと入力を持つ機能コンポーネントがあります。 useState Reactフックを実装することで、入力を解除し、それを無効にするチェックボックスのonchange関数を作成しようとしています。誰かがこのような何かをしたフックで何らかの経験を持っていますか？私はまだReactフックの新しいものとして、私の頭の上をより良い包むためにコードサンプルを見ようとしています

_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

_
reactjsonclickonchangereact-hooks
4
Josh

useStateフックを使用して、ユーザーが他の入力を無効にするためにチェックボックスをクリックしたかどうかを追跡する状態変数を作成できます。 useStatehook 初期値を取り、その状態変数の値を更新するために使用される関数（これは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>
    )
}
 _

これが 実施例 。

おそらくあなたはこれらの値のためのより良い名前を思いつきたいですが、あなたがここでポイントを得ることができます。

3
Henry Woody