微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何使用一个钩子使用一个事件处理函数动态更新任何输入字段的值

如何解决如何使用一个钩子使用一个事件处理函数动态更新任何输入字段的值

您应该将setState与回调函数一起使用:

setState(prev => ({ 
    ...prev,
    email: 'new mail',
}))

您将创建一个新的状态对象,该对象由先前的状态创建。而且您可以覆盖所需的任何内容。如果您有一个复杂的状态对象,则需要更多的新对象。

解决方法

TL; DR

有没有一种方法可以像事件状态组件那样使用一个事件处理函数来动态更新输入字段的值。

我正在使用2个字段的登录表单。电子邮件和密码。当我使用表示两个字段的2
useState时,然后当我使用handleChange更新状态时,两个状态都将得到更新。这不是意图。

   const [email,setEmail] = useState()
   const [password,setPassword] = useState()

    const handleChange = e => {
        const {value} = e.target
        setEmail(value)
        setPassword(value)
    }

我不想使用多个事件处理程序来处理每个输入字段。我试过了

    const [state,setState] = useState({
        email : "",password : ""
    })

    const handleChange = e => {
        const {name,value} = e.target
        setState({
            [name] : value
        })
    }

但这会一次更新一个属性。并且其他财产价值迷失了。因此,有什么方法可以像事件状态组件那样使用一个事件处理函数来更新所有输入字段。

    this.state = {
      email : "",password : ""
    }

    const handleChange = e => {
        const {name,value} = e.target
        this.setState({
           [name] : value
        })
    }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。