Question

每当用户在文本框中输入某个值时，我想调用某个函数。这是我使用 React Hooks 的代码：

function MyApp() {
    const [name, setName] = React.useState("");
    const [city, setType] = React.useState("");
    const [completion, setCompletion] = useState(0);
    
    calculateProgress = () => {
        let v1 = name;
        let v2 = city;
        let total = 0;
        if(v1.length >0 ) total += 50;
        if(v2.length >0 ) total += 50;
        setCompletion(total);
    }
    
    return {
        <div>
            <input type="name" onChange={(e) => setName(e.target.value); calculateProgress();}
            <input type="city" onChange={(e) => setCity(e.target.value); calculateProgress();}
        </div>
    }
}

当我在 name 或 city 中输入一些值时，应该调用 calculateProgress。但就我而言，每当我输入内容时，calculateProgress 方法中 name 或 city 的值都是空的。这样做的正确方法是什么？

Answer 1

就像我在评论中所说的那样，当 calculateProgress 被调用时，city 或 name 变量的状态还没有改变。 React 无法将函数一分为二并在中途刷新状态。它将在使用新值刷新组件状态之前完全运行您的 onChange 函数。

您必须将值传递到您的函数中：

function MyApp() {
    const [name, setName] = React.useState("");
    const [city, setType] = React.useState("");
    const [completion, setCompletion] = useState(0);
    
    calculateProgress = (name, city) => {
        let v1 = name;
        let v2 = city;
        let total = 0;
        if(v1.length >0 ) total += 50;
        if(v2.length >0 ) total += 50;
        setCompletion(total);
    }

    return {
        <div>
            <input type="name" onChange={(e) => setName(e.target.value); calculateProgress(e.target.value, city);}
            <input type="city" onChange={(e) => setCity(e.target.value); calculateProgress(name, e.target.value);}
        </div>
    }
}

注意：为简单起见，我尽可能减少了更改，但我建议也为那些 onChange 处理程序创建一个包装函数，并可能重命名 name 和 city 变量以用于 { {1}} 函数来明确它们是什么（或者更确切地说它们不是什么）

使用 useState React 钩子和调用其他函数

1 个答案: