Как передать ссылку на ввод пользователя из одного компонента для отображения в другом компоненте (React) - PullRequest
Новая
       1

Как передать ссылку на ввод пользователя из одного компонента для отображения в другом компоненте (React)

0 голосов
/ 05 апреля 2020

Мне нужна помощь с управлением состоянием в моем Chat-приложении.

Описание:
Я пытаюсь отобразить имя пользователя, введенное из компонента 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} присоединился к чату». где userName заменяется вводом пользователя в компоненте ChatScreen. js внутри фрагментов пользовательского интерфейса Semanti c.

Github Link: https://github.com/George-Jindo/chat-app

...