реагировать на ввод только для чтения начальной загрузки в formcontrol

Я использую реагирующую загрузку, и эта структура предоставляет несколько хороших элементов управления FormControl.

Но я хотел бы, чтобы поле ввода, сгенерированное в FormControls, имело свойство readonly="readonly". Таким образом, это поле выглядит так же, как другие мои FormControls, но не дает ввода с клавиатуры в IOS.

В моем случае ввод будет предоставлен средством выбора календаря, которое будет вызвано всплывающим окном.

Кто-нибудь знает, как дать FormControl параметр readonly="readonly", чтобы сгенерированное поле ввода в браузере имело свойство readonly="readonly"?

Большое спасибо за ответы!


reactjs react-bootstrap form-control readonly-attribute
person user3611459    schedule 16.05.2016    source источник
comment
Что вы уже пробовали? Пожалуйста, отредактируйте свой вопрос, чтобы показать минимально воспроизводимый пример кода, с которым у вас возникли проблемы , тогда мы можем попытаться помочь с конкретной проблемой. Вы также должны прочитать Как спросить.   -  person Toby Speight    schedule 16.05.2016

Ответы (2)


arrow_upward
41
arrow_downward

Это не похоже на проблему с реакцией-загрузкой, а скорее с самой реакцией. React не передает реквизит «только для чтения» сгенерированному (реальному) элементу DOM:

React-bootstrap создает следующий ответный ввод виртуального дома: введите здесь описание изображения

Тем не менее, реакция сгенерировала следующий реальный элемент DOM, опуская атрибут только для чтения: введите здесь описание изображения

Возможно, использование «отключено» может помочь в вашем случае:

<FormControl
   disabled
   type="text"
   placeholder="Enter text"
   onChange={this.handleChange}
 />

Различия между readonly и отключенными см. здесь: https://stackoverflow.com/a/7730719/1415921

Я создал задачу в репозитории React на github: #6783

ОБНОВЛЕНИЕ

Получив ответ в вышеуказанном вопросе. Вам нужно написать его с помощью camelcase: readOnly.

Так должно быть:

<FormControl
   readOnly
   type="text"
   placeholder="Enter text"
   onChange={this.handleChange}
 />
person omerts    schedule 16.05.2016
comment
он может быть readOnly только при определенных обстоятельствах, поэтому, когда это не так, вам нужно обрабатывать изменения - person omerts; 29.01.2017
comment
@omerts, но, как вы ответили, он будет доступен только для чтения при любых обстоятельствах? - person joedotnot; 08.02.2019
comment
@joedotnot Вы можете использовать его с: readOnly={false} || только для чтения = {правда} - person omerts; 13.02.2019
comment
@омертс. Нет, не существует такой вещи, как readOnly= true/false; если он присутствует, предполагается, что он доступен только для чтения! вы можете иметь readOnly=whatevs, readonly=true, readOnly=false все это означает одно и то же. - person joedotnot; 14.02.2019
comment
@joedotnot Это работает, пожалуйста, посмотрите, как я это точно написал, я использую {false}, а не «false». См. здесь: jsfiddle.net/omerts/b5q8axhn - person omerts; 19.02.2019
comment
@omerts да, вы правы на 100%, это работает! И теперь это будет то, что я и другие должны помнить. что false и {false} ведут себя по-разному - это совершенно неожиданно (и плохо, на мой взгляд, что библиотека допускает это) - person joedotnot; 19.02.2019

arrow_upward
0
arrow_downward

Старая проблема, новый подход: используйте событие onChange, чтобы контролировать, будете ли вы вызывать событие handleChange или нет. Я определил editForm как значение реквизита, управляемое кнопками, чтобы увидеть, нахожусь ли я в режиме просмотра или редактирования.

Пример:

<TextField
        name="id"
        label="ID
        value={entityState.entity.Id || ""}
        onChange={(a) => (props.formEdit ? handleChange(a) : "")}
/>
person Edu Garcia    schedule 17.06.2020