Модальный диалог в действии - PullRequest
0 голосов
/ 28 марта 2019

Я работаю в приложении React и хочу открыть модальное диалоговое окно одним нажатием кнопки.Я использую материализовать CSS в моем приложении.Я могу нормально открыть модальное диалоговое окно, но у меня есть некоторые проблемы с полем ввода внутри модального диалогового окна.Мое намерение состоит в том, чтобы передать значение через свойства субкомпоненту внутри модального диалогового окна и показать это значение в поле ввода.Это отлично работает в первый раз, так как я устанавливаю свойство defaultValue для ввода.

В следующий раз, если я отправлю новое значение через свойства в модальное диалоговое окно, оно не будет обновлять значение поля ввода внутри подкомпонента, но будет отображать набор значений по умолчанию или значение, измененное пользователем.Я попытался использовать значение вместо defaultValue, но оно также запрашивает событие onChange и использует состояние компонента для установки значения поля ввода.

Проблема в том, что когда я использую onChangeсобытие поля ввода и сделать setState, он закрывает модальное диалоговое окно, если я не делаю setState, то модальное диалоговое окно только для чтения.

Как мне обойти это, чтобы обновлять поле ввода все время, когда изменяется значение в родительском элементе, и это также должно обновлять модальное диалоговое окно.

Так я использую подпрограммукомпонент с полем ввода внутри модального диалога

<input  type="text"
id={"min_" + this.props.index + "_inputId"}
key={"min_" + this.props.index + "_inputKey"}>
defaultValue={this.props.Value}                                               
onBlur={function (event) { that.props.onBlur(event, this.props.index) }                      
</input>

1 Ответ

0 голосов
/ 28 марта 2019

Вы можете использовать свойство value вместо defaultValue, оно отлично работает, как только проверите его, и вы можете открыть модал как <Modal isOpen ={this.state.isModalOpen} autoFocus={true}> </Modal>. Используя свойство isModalOpen, вы можете открыть модальное окно. если вы используете setState, он также не закроется, пока вы не установите значение isModalOpen false.

...