可以用onChange以react.js形式获得自动完成的输入

发布于 2025-01-28 05:58:14 字数 1194 浏览 3 评论 0原文

我有一个带有一些输入的表格，其中onChange = {e =＆gt;他们的处理（e）}在其中。问题在于，当用户插入有效的zip时，将其中一个，即邮政编码字段，自动完成其他输入，以免触发OnChange，因此无法保存输入值。

    //SAVING DATA FROM FORM
    const [values, setValues] = useState({})

    function handleChange(e) {
        setValues({ ...values, [e.target.id]: e.target.value})
    }

    //AUTOCOMPLETING FROM ZIP
    const [address, setAddress] = useState("")
    const [neighborhood, setNeighborhood] = useState("")
    const [city, setCity] = useState("")
    const [state, setState] = useState("")

    async function searchZIP(zip) {
        zip = zip.replace(/\D/g, "")
        const data = await fetch(`http://viacep.com.br/ws/${zip}/json/`)
            .then(data => data.json())
            .catch(data => data = "")
            
        let { logradouro="--", bairro="--", localidade="--", uf="--" } = data
        if(zip.length === 0) logradouro="", bairro="", localidade="", uf=""
        
        setAddress(logradouro)
        setNeighborhood(bairro)
        setCity(localidade)
        setState(uf)
    }

    //SUBMITING
    function handleSubmit(e) {
        e.preventDefault()
        axios.post("http://localhost:8080", values)
    }

原文

I have a form with some inputs with onChange={e => handleChange(e)} in them. The problem is that one of them, the ZIP code field, autocompletes other inputs when the user inserts a valid ZIP so the onChange won't be triggered and thus the input value won't be saved.

    //SAVING DATA FROM FORM
    const [values, setValues] = useState({})

    function handleChange(e) {
        setValues({ ...values, [e.target.id]: e.target.value})
    }

    //AUTOCOMPLETING FROM ZIP
    const [address, setAddress] = useState("")
    const [neighborhood, setNeighborhood] = useState("")
    const [city, setCity] = useState("")
    const [state, setState] = useState("")

    async function searchZIP(zip) {
        zip = zip.replace(/\D/g, "")
        const data = await fetch(`http://viacep.com.br/ws/${zip}/json/`)
            .then(data => data.json())
            .catch(data => data = "")
            
        let { logradouro="--", bairro="--", localidade="--", uf="--" } = data
        if(zip.length === 0) logradouro="", bairro="", localidade="", uf=""
        
        setAddress(logradouro)
        setNeighborhood(bairro)
        setCity(localidade)
        setState(uf)
    }

    //SUBMITING
    function handleSubmit(e) {
        e.preventDefault()
        axios.post("http://localhost:8080", values)
    }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暖风昔人 2025-02-04 05:58:15

您需要以编程方式触发输入更改事件。
在

最通用的解决方案（从

const inputTypes = [
    window.HTMLInputElement,
    window.HTMLSelectElement,
    window.HTMLTextAreaElement,
];

export const triggerInputChange = (node, value = '') => {

    // only process the change on elements we know have a value setter in their constructor
    if ( inputTypes.indexOf(node.__proto__.constructor) >-1 ) {

        const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
        const event = new Event('input', { bubbles: true });

        setValue.call(node, value);
        node.dispatchEvent(event);

    }

};

You need to trigger input change event programmatically.
there is discussion about on react github repo, you can find some useful code snippets from there.

The most generic solution (taken from here) is:

const inputTypes = [
    window.HTMLInputElement,
    window.HTMLSelectElement,
    window.HTMLTextAreaElement,
];

export const triggerInputChange = (node, value = '') => {

    // only process the change on elements we know have a value setter in their constructor
    if ( inputTypes.indexOf(node.__proto__.constructor) >-1 ) {

        const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
        const event = new Event('input', { bubbles: true });

        setValue.call(node, value);
        node.dispatchEvent(event);

    }

};

回复收藏 0 原文

~没有更多了~