无法输入反应输入字段

Question

我有一个简单的表单，其中包含我无法输入的输入字段。我首先认为问题在于将输入设置为只读的onChange 或value 道具，但事实是我无法输入浏览器建议并且状态更新完美（See gif here）就是这样即使重新加载页面，我也不会让我用键盘打字。

我还有一个登录页面可以正常工作，除非我注销并重定向回该页面，在我重新加载页面之前它不会工作，现在它可以工作了。

<input
value={name}
onChange={handleChange}
name="name"
/>

const [name, setName] = useState("");

const handleChange = (e:any) => {
    setName(e.target.value);
}

奇怪的是它处于只读状态，但是当我使用浏览器建议时，它可以工作并更新状态。

这是整个组件：

import React, { useEffect, useState } from 'react';
import { useForm } from '../../utils/useForm';

import { CubeType } from '../../interfaces';

//import useStore from '../store/Store';

import { Modal, Button, Row, Col, FormGroup, FormLabel, FormControl } from 'react-bootstrap';

type Props = {
    show: Boolean,
    onClose: () => void,
    cubeTypes: CubeType[]
};

const ModalTimelist = (props: Props) => {
    //const store = useStore();
    const [values, handleChangee] = useForm({ cubeType: 1, name: '' });


    const [name, setName] = useState("");

    const handleChange = (e:any) => {
        setName(e.target.value);
    }

    useEffect(() => {
        const modal = document.getElementsByClassName('modal')[0];
        if(modal) modal.removeAttribute('tabindex');
    }, [props.show]);

    return (
        <>
            <Modal show={props.show} onHide={ props.onClose }>
                <Modal.Header>
                    <Modal.Title>Timelist { name }</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Row>
                        <Col md="3">
                            <FormGroup>
                                <FormLabel>Cube Type</FormLabel>
                                <select
                                    value={values.cubeType}
                                    onChange={ handleChangee }
                                    className="form-select"
                                    name="cubeType"
                                >
                                    {props.cubeTypes.map((it, idx) => {
                                        return (<option value={ idx } key={"cube"+idx}>{it.name}</option>);
                                    }) }
                                </select>
                            </FormGroup>
                        </Col>
                        <Col md="9">
                            <FormGroup>
                                <FormLabel>Name</FormLabel>
                                <FormControl
                                    value={name}
                                    onChange={handleChange}
                                    name="name"
                                />
                            </FormGroup>
                        </Col>
                    </Row>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="success" onClick={() => props.onClose()}>
                        Save
                    </Button>
                    <Button variant="outline-danger" onClick={() => props.onClose()}>
                        Cancel
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
}

export default ModalTimelist;

Answer 1

输入的值必须是状态值，否则使用此代码不会改变

const App = () => {
   const [name,setName] = useState("")
   const handle = ({target:{value}}) => setName(value)
   return <input
     value={name}
     onChange={handle}
      name="name"
    />
}

Answer 2

我尝试了代码，它工作正常，我认为你应该更换浏览器

如果你愿意

改变这个

const ModalTimelist = (props: Props) => {

与

const ModalTimelist:React.FC<Props> = (props) => {

Answer 3

使用去抖动来设置状态名称。

例子：

const handleChange = (e:any) => {
    debounce(() => { setName(e.target.value) }, 300);
}