1

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

我还有一个运行良好的登录页面，除了当我注销并重定向回该页面时，它在我重新加载页面之前不会工作，现在它可以工作了。

<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;
4

3 回答 3

0

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

如果你想

改变这个

const ModalTimelist = (props: Props) => {

和

const ModalTimelist:React.FC<Props> = (props) => {
于 2021-08-14T15:14:42.407 回答
0

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

例子：

const handleChange = (e:any) => {
    debounce(() => { setName(e.target.value) }, 300);
}
于 2021-08-18T18:22:14.780 回答
0

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

const App = () => {
   const [name,setName] = useState("")
   const handle = ({target:{value}}) => setName(value)
   return <input
     value={name}
     onChange={handle}
      name="name"
    />
}
于 2021-08-14T14:56:32.843 回答