带有 React Hooks 的受控/非受控输入字段

Question

我有一个用 React Typescript 编写的带有钩子的应用程序，我试图以两种方式（受控/不受控）设置日期输入字段。当用户更改输入或组件从其父组件接收道具时，它应该更改。

但是，我的问题是在输入字段设置 value 属性后，用户无法更改输入字段中的值...这是我的代码：

interface Props {
    valuesChanged: (type: string, value: string) => void;
    minChanged: string;
    maxChanged: string;
}

const DateInputField: FC<Props> = ({ valuesChanged, minChanged, maxChanged }: Props) => {
    const [minValue, setMinValue] = useState<string>('');
    const [maxValue, setMaxValue] = useState<string>('');

    // Input changed in parent, trigger changes here
    useEffect(() => {
        const date = moment(minChanged, 'YYYY-MM-DD', true);
        if (date.isValid()) {
            setMinValue(minChanged);
        }
    }, [minChanged]);

    useEffect(() => {
        const date = moment(maxChanged, 'YYYY-MM-DD', true);
        if (date.isValid()) {
            setMaxValue(maxChanged);
        }
    }, [maxChanged]);

    // Input changed in input field
    const inputChanged = (type: string, input: string) => {
        const date = moment(input, 'YYYY-MM-DD', true);
        if (date.isValid()) {
            valuesChanged(type, input); // tell parent component values changed
            if (type === 'startDate') {
                setMinValue(input);
            } else if (type === 'endDate') {
                setMaxValue(input);
            }
        }
    };

    return (
        <div>
            <input value={maxValue} type="date" onChange={(e) => inputChanged('endDate', e.target.value)} />
            <input value={maxValue} type="date" onChange={(e) => inputChanged('endDate', e.target.value)} />
        </div>
    );
};
export default DateInputField;

valuesChanged 属性是一个函数，告诉父组件此组件中的值已更改。 希望有人能帮忙！

Answer 1

moment().isvalid 检查日期是否有效。

您的输入不会输入任何内容，除非通过 onChange 方面传递给输入的内容是有效的。

根据文档，isvalid 仅支持对整个日期有效。只有当您可以一键输入整个日期时，onCHange 才会起作用。

因此，它不会输入，因为在将整个日期输入输入之前无法确定有效性。

如果你想解决这个问题，你可以让它不可能偏离 dat。这意味着您必须通过一个函数传递它，当它偏离可能是有效的日期时，它会显示为 false。

编辑： 如果您想创建一个日期，然后从该日期中取出与您从输入中输入的金额相同的金额，则可以检查该日期是否有效。

类似：

    let index = input.length;
        (index, date) => {
             setNewDate(input + date.substr(0, index) );
        }
if(newDate) { setInput(e.target.value) }

或者您可以在提交错误格式时创建警报，通常情况下。所以在提交事件上使用 moment(input, dd-mm--yy ).isvalid。