时间戳

首页 > 解决方案 > Reactjs onChange={handleInputChange} 不起作用

reactjs - Reactjs onChange={handleInputChange} 不起作用

问题描述

再会 ！

为什么handleInputChange不起作用？我错过了我的代码中的某些内容吗？我没有收到任何错误，但handleInputChange没有工作。

这是我的代码

  const [formData, setFormData] = useState({});
  const [errMsg, setErrMsg] = useState({});

  const handleInputChange=(e)=>{
    let val = e.target.value;
    console.log(val)
    setFormData({
      ...formData,
      [e.target.name]: val
    });
  }

    <FormControl 
        variant="outlined" 
        fullWidth
        margin="normal">
          <InputLabel htmlFor="password-mask">Password</InputLabel>
          <OutlinedInput
            id="password-mask"
            type={valuespw.showPassword ? 'text' : 'password'}
            value={formData?.password}
            name="password"
            onChange={handleInputChange}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="masked password"
                  onClick={handleClickShowPassword}
                  onMouseDown={handleMouseDownPassword}
                  edge="end"
                >
                  {valuespw.showPassword ? <Visibility /> : <VisibilityOff />}
                </IconButton>
              </InputAdornment>
            }
            labelWidth={75}
          />
      </FormControl>

标签： reactjs

解决方案

这听起来像是一个关闭问题。 setFormData被包裹在里面handleInputChange，然后被包裹onChange在OutlinedInput. 我想知道您是否永远不会逃避闭包，这意味着您的值将永远是陈旧的，永远不会真正更新，也永远不会onChange调用OutlinedInput. 你可以尝试几件事：

  1. 在内部使用回调setFormData以确保您使用的是最新值：
 const handleInputChange=(e)=>{
    let val = e.target.value;
    console.log(val)
    setFormData(preValues => ({
      ...preValues,
      [e.target.name]: val
    }));
  }
  1. 包裹handleInputChange在 useCallback 中，以确保每次值更改时它都会提供新值：
 const handleInputChange= React.useCallback((e) => {
    let val = e.target.value;
    console.log(val)
    setFormData({
      ...formData,
      [e.target.name]: val
    });
  }, [formData, setFormData])

粗略一看，这些都是我会尝试的。如果这些没有帮助，请尝试在代码沙箱中复制问题，然后在此处发布可重现的问题，我们可以更好地查看和调试。

推荐阅读