Реагировать только на ввод бутстрапа в рамках формы управления

Я использую реагирующий начальный загрузчик, и этот фреймворк предоставляет несколько приятных FormControls.

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

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

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

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

Источник

3 ответа

Решение

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

React-bootstrap создает следующий вводный виртуальный ввод dom:

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

Может быть, использование "отключен" может помочь в вашем случае:

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

Для различий между только для чтения и инвалидов см. Здесь: /questions/31484353/v-chem-raznitsa-mezhdu-disableddisabled-i-readonlyreadonly-dlya-polej-vvoda-formyi-html/31484365#31484365

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

ОБНОВИТЬ

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

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

<FormControl
   readOnly
   type="text"
   placeholder="Enter text"
   onChange={this.handleChange}
 />
Источник

На основе значений этот атрибут будет readOnly={!!value}, чтобы поле ввода было отключено для редактирования.

      class Input extends React.Component {
  render () {
    const { defaultValue, value, onChange } = this.props
    const nothing = () => {}
    
    return (
      <input
        type='text'
        defaultValue={defaultValue}
        value={value ? value.toUpperCase() : undefined}
        readOnly={!!value}
        onChange={value ? nothing : onChange}
       />
    )
  }
}

class App extends React.Component {
  constructor () {
    super ()
    
    this.state = {
      value: 'arr'
    }
  }
  
  handleChange (e) {
    const { target: { value }} = event
    this.setState({ value })
  }
  
  render () {
    const { value } = this.state
 
    return (
      <div>
        <Input 
          onChange={this.handleChange.bind(this)}
          defaultValue={'patata'}
          />
        <Input 
          value={value}
          />
     </div>
    )
  }  
}

ReactDOM.render(<App />, document.getElementById('arr'))
Источник

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

Пример:

<TextField
        name="id"
        label="ID
        value={entityState.entity.Id || ""}
        onChange={(a) => (props.formEdit ? handleChange(a) : "")}
/>
Источник
Другие вопросы по тегам