Reactjs 如何将条件写入React中的输入标记

我正在做React项目，在那个项目中我有一个场景，我必须写

输入标记的条件。条件是这样的，在我的表单中，输入标记类型是

编号，最小值为1001，最大值为1500。所以现在我想要的是如果我输入数字

如果小于1001，则不应在输入标记中使用该数字。有人能帮我吗

这样写逻辑

这是Form.js

import React from 'react';
import './aum-company-modal.css';
import { Button, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row, FormGroup, Label, Input, } from 'reactstrap';

const AumCompanyModal = () => {
    return (
        <Row>
            <Col md="6" sm="6" xs="6">

                <Modal isOpen
                >
                    <ModalHeader >Add new</ModalHeader>
                    <ModalBody>
                        <Row>
                            <Col md="12" sm="12" xs="12">
                                <FormGroup>
                                    <Label for="exampleName">Min Value</Label>
                                    <Input
                                        type="text"
                                        name="roleName"
                                        placeholder="Enter minimum value"
                                        value='1000'

                                    />
                                </FormGroup>
                                <FormGroup>
                                    <Label for="exampleName">Max Value</Label>
                                    <Input
                                        type="number"
                                        name="roleName"
                                        placeholder="Enter maximum value"
                                        min='1001' max='1500'
                                    />
                                </FormGroup>
                            </Col>

                        </Row>


                    </ModalBody>
                    <ModalFooter>
                        <Button  color="secondary">
                            Cancel
                </Button>
                        <Button type="submit" color="primary">
                            Submit
                </Button>
                    </ModalFooter>
                </Modal>
            </Col>
        </Row>
    )
}

export default AumCompanyModal

从“React”导入React；
导入“/aum company model.css”；
从“reactstrap”导入{Button、Col、Modal、ModalBody、ModalFooter、ModalHeader、Row、FormGroup、Label、Input、}；
常量aumcompanymodel=（）=>{
返回(
新增
最小值
最大值
取消
提交
)
}
导出默认AumCompanyModal

您输入的内容没有value属性，因此我建议您设置一个状态，将其用作value，并设置一个onChange，这是一个检查如下内容的函数：

const [ inputValue, setInputValue ] = useState(1000);

handleChange = (e) => {
    if (e.target.value > 999 && e.target.value < 1501) {
        setInputValue(e.target.value);
    }
}

<Input
    type="number"
    name="roleName"
    placeholder="Enter maximum value"
    min='1001' max='1500'
    onChange={handleChange}
    value={inputValue}
/>

const[inputValue，setInputValue]=useState（1000）；
handleChange=（e）=>{
如果（e.target.value>999&&e.target.value<1501）{
设置输入值（如目标值）；
}
}

Hi@Carlos Saiz-Orteu您的代码运行良好，但我想对您的代码做一些小改动，例如，如果我想输入1400，意味着我必须多次单击递增按钮，因此用户可能会感到不舒服。所以我想要的是用户可以直接在输入标签中输入数字，但是我们必须设置这样的条件，如果数字小于1001，那么输入标签不应该取那个数字，如果数字大于1500，那么输入标签也不应该取这个数字。如果你想这样控制它，你应该在提交时控制它。只需再次点击submit按钮，检查您创建的状态是否在您想要的数字之间。如果不是，则显示警报、错误或任何需要显示的内容。还有，如果我帮你确保在我的回答中留下一票！