React js在功能组件中设置状态答案

【问题标题】：React js set state in functional componentReact js在功能组件中设置状态
【发布时间】：2021-04-17 19:09:15
【问题描述】：

我正在尝试创建一个功能登录组件。当我评论 onChange 时，我在浏览器中收到以下错误

index.js:1 Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

如果我取消注释 onChange 并尝试使用用户名字段，我会得到以下错误 Login.js:20 Uncaught TypeError: Cannot read property 未定义的'inputChangedHandler' 在 onChange (Login.js:20)

如何解决？从 'react' 导入 React, { useState, props };

const Login = (prop) => {

    const [username] = useState('Mr x');


    const inputChangedHandler = (event) => {
        const updatedKeyword = event.target.value;
        // May be call for search result
    }


    return (
        <div>
            <h1>Login</h1>
            <div className="container">

                User Name: <input type="text" name="username" value={username}
                  //  onChange={(event) => this.inputChangedHandler(event)}
                     />

                    Password: <input type="password" name="password" />
                <button className="btn btn-success"  >Login</button>
            </div>
        </div>
    )
}


export default Login;

【问题讨论】：

标签： reactjs

【解决方案1】：

您需要从this.inputChangedHandler(event) 中删除this

要实际更改值，您需要向您的useState 添加一个设置器，例如const [username,setUsername] = useState('Rahul Raj');

然后像这样使用onChange={(event) => setUsername(event.target.value)}

【讨论】：

然后我的用户名字段变为“只读”
查看更新，如果它解决了您的问题，请告诉我。
它有效。谢谢你能告诉我setUsername是什么
每个 useState 返回 2 个值 1) 在您的情况下是当前值 username，在您的情况下是设置器函数 setUsername 在调用时将 username 的值更新为值传入（请注意，username 和 setUsername 都是通用名称，可以称为任何名称），如果您需要更多详细信息，请告诉我。
为此，您需要设置另一个 useState const 像这样 const [password,setPassword] = useState(""); 并在密码输入中使用它，就像在用户名中一样。希望这能回答你的问题。