如何在 REACT.js 中的自定义递增-递减字段中启用手动值文本输入

Question

我是新手，所以请多多包涵。我正在尝试创建自定义 increment/decrement 数量选择器。除了不允许我手动更改输入框的值外，一切都按照我的意愿进行。我不知道如何启用手动输入。

我想让用户能够使用 increment/decrement 按钮更改值或手动输入数值。提前致谢！！

const Quantity = ({max}) => {

    const [qty, setQty] = useState(0)
    let increaseQty = () => setQty(qty + 1)
    let decreaseQty = () => setQty(qty - 1)

    if(qty<=0){
        decreaseQty = () => setQty(0)
    }

    if(qty>=max){
        increaseQty = () => setQty(max)
    }

    return (
       <div>
            <Button onClick={decreaseQty}> - </Button>
            <input  type="text" value={qty}/>
            <Button onClick={increaseQty}> + </Button>        
        </div>
    )
 }

 export default Quantity

Answer 1

问题是功能组件在渲染时只有运行s 一次。因此，当此更改时，检查 0 或 max 的 if 语句将不会运行。相反，如果您在函数体中包含 if 语句，那么每次函数被触发时它都会运行。

你可以实现类似的东西：

const Quantity = ({ max }) => {
  const [qty, setQty] = useState(0);

  function decreaseQty() {
    if (qty <= 0) {
      setQty(0);
    } else {
      setQty(qrt - 1);
    }
  }

  function increaseQty() {
    if (qty >= max) {
      setQty(max);
    } else {
      setQty(qrt + 1);
    }
  }

  function onChange(e) {
    const v = e.target.value;
    if (v <= 0) setQty(0);
    else if (v >= max) setQty(max);
    else setQty(v);
  }

  return (
    <div>
      <Button onClick={decreaseQty}> - </Button>
      <input type="text" value={qty} onChange={(e) => onChange(e)} />
      <Button onClick={increaseQty}> + </Button>
    </div>
  );
};

export default Quantity;

Answer 2

onChange={onChange} 是用户能够手动输入值所必需的。

import React, { useState } from "react";

const Quantity = ({ max }) => {
  const [qty, setQty] = useState(0);

  const decreaseQty = () => {
    if (qty <= 0) {
      setQty(0);
    } else {
      setQty(qty - 1);
    }
  };

  const increaseQty = () => {
    if (qty >= max) {
      setQty(max);
    } else {
      setQty(qty + 1);
    }
  };

  const onChange = (e) => {
    const value = parseInt(e.target.value);
    if (value >= 0 && value <= max) {
      setQty(value);
    }
  };
  return (
    <div>
      <button onClick={decreaseQty}> - </button>
      <input type="text" onChange={onChange} value={qty} />
      <button onClick={increaseQty}> + </button>
    </div>
  );
};

export default Quantity;

Answer 3

const Whosebug = ({max}) => {
    const [qty, setQty] = useState(0)
    let increaseQty = () => setQty((qty) => qty+ 1)
    let decreaseQty = () => setQty(qty - 1)

    if(qty<=0){
       decreaseQty = () => setQty(0)
    }

    if(qty>=max){
       increaseQty = () => setQty(max)
    }
    const manuallyUpdate = (event) => {
        let newvalue=parseInt(event.target.value)
        if(newvalue <= 0){
            setQty(0)
        }else if(newvalue >= parseInt(max)){
            setQty(max)
        }else{
            setQty(newvalue)
        }
    }

    return (
        <Container maxWidth="lg" style={{paddingTop:"5%"}}>
            <div>
               <Button onClick={decreaseQty}> - </Button>
               <input  type="text" value={qty} onChange={(e) => manuallyUpdate(e)}/>
               <Button onClick={increaseQty}> + </Button>
            </div>
        </Container>
    )
}

如何在 REACT.js 中的自定义递增-递减字段中启用手动值文本输入

How to enable manual value text input in custom increment-decrement field in REACT.js

javascript

reactjs

user-input

increment

decrement