Ввод в javascript из пользовательской обработки - PullRequest
Новая
       15

Ввод в javascript из пользовательской обработки

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

Я пытаюсь ввести и сохранить данные из поля ввода в модальном режиме. По какой-то причине я не могу набрать текст внутри поля после рендеринга модала.

Это мой код: 

constructor(props){
        super(props);
        this.state = {
            showHide : false,
            email: ' '
        }
    }

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

Здесь я попытался ввести пользовательский ввод. 

<FormGroup>
<label for="message-text" class="col-form-label">Email Adress:</label>
<input type="text" class="form-control" name='email' placeholder="Email"
     value={this.state.email} onChange={e => this.handleChange(e)} >
</input>
</FormGroup>

Любые идеи о том, почему я не могу набрать внутри поле? Пожалуйста и спасибо.

1 Ответ

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

Так что ошибка в вашем setState, вы должны использовать e.target.name. Это свойство имени предоставит строковое значение 'email', как установлено во входных данных.

Описание:

Имя - это атрибут HTML, который доступен из объекта Event, передаваемого в функцию, это имя задается как «электронная почта» в вашем вводе как вы видете. А поскольку вы не обновляете состояние правильно, то входные данные, которые сейчас являются управляемым компонентом (значение, привязанное к состоянию), не обновляются.

Для получения более подробной информации обратитесь к свойствам вычисляемых имен ES6. 

  this.setState({
        [e.target.name]: e.target.value
    })
...