Question

我需要在我的聊天应用程序中进行状态管理的帮助。

说明：
我试图显示从UserModal组件输入到我的ChatScreen组件的用户名。我正在onChange内部使用UserModal函数，并且正在使用switch case语句来确保表单验证。然后将名称设置为数组的状态，然后将值分配给名称，如下所示：

UserModal.js

onChange = e => {
        e.preventDefault();
        const { name, value } = e.target;
        let formError = this.state.formError;
        switch (name) {
            case 'userName':
                formError.userName =
                    value.length < 3 ? 'minimum 3 characters required' : '';
                break;
            default:
        }
        this.setState({ formError, [name]: value }, () =>
            console.log(this.state)
        );
    };

onSubmit功能

onSubmit = (e) => {
        e.preventDefault();

        if (formValid(this.state)) {
            Axios.post('http://localhost:5000/api/authenticate').then(
                (res) => {
                    if (res.data.isSuccessful === true) {
                        alert('Your username is: ' + this.input.value);
                        this.close();
                    } else {
                        alert('Error Message: ' + res.data.ErrorMessage);
                    }
                }
            );
        } else {
            alert(
                'Error message: Please enter a username with a minimum of 3 characters'
            );
        }
    };

表格

<form action="Main.js" className="form-inside-input" onSubmit={this.onSubmit} noValidate>
  <label>Username:</label>
  <input
    className={formError.userName.length > 0 ? "error" : null}
    type="text"
    placeholder="Enter username"
    name="userName"
    onChange={this.onChange}
    ref={(input) => (this.input = input)}
    noValidate
  ></input>
  {formError.userName.length > 0 && <span>{formError.userName}</span>}

  <Button
    type="submit"
    positive
    icon="checkmark"
    labelPosition="right"
    content="Let me in!"
    onClick={() => {
      this.onSearch();
    }}
  />
</form>;

目标：
我的目标是获取用户在模式中的用户名字段中输入的内容，并显示“ {userName}已加入聊天”。其中userName被替换为用户输入，位于语义UI片段内的ChatScreen.js组件中。

Github链接：https://github.com/George-Jindo/chat-app

如何从一个组件传递用户输入引用以显示到另一个组件（反应）

0 个答案: