Реакция ввода, теряющего фокус в Firefox - PullRequest
Новая
       18

Реакция ввода, теряющего фокус в Firefox

0 голосов
/ 30 мая 2018

Я кодирую в реакции JS.

У нас есть форма ввода, в которой есть ввод текста.При вводе текста запускается функция onChange, которая приводит к изменению состояния (и, следовательно, к отображению).

var resultJSXcount = 1;
for (let i = 0; i < myArray.length; i++){
  resultJSXTable.push(
    <tr key= {resultJSXcount++}>
      <td  style = {{"paddingRight": "10px"}} > {i+1}: </td>
      <td  style = {{"paddingRight": "10px"}}> 
        <input 
          type='text' 
          id = {i}
          value = {myArray[i].name}
          onChange = {(event)  => {
            myArray[i].name = event.target.value; 
            this.props.updateState()}}
          />
      <span style={{"color":"red"}} > 
        {this.props.parentState.errorName[i]} 
      </span>
    </tr>
  ); 
}

Это прекрасно работает в Chrome и Internet Explorer.В Firefox вы не можете печатать, потому что ввод теряет фокус.

Любая помощь приветствуется!

Ответы [ 2 ]

0 голосов
/ 02 июня 2018

Извини!Я обнаружил, что проблема была в совершенно другой области кода.Приведенный выше код работал нормально.

Моя ошибка заключалась в том, что когда я применял свои стили, у меня был случайный фокус ().Я не уверен, почему это все еще работало в Chrome, но кризис предотвращен.

Спасибо за ввод!

0 голосов
/ 30 мая 2018

У меня есть предположение.Это всего лишь предположение, потому что вы не показываете все, что происходит.

Ваши проблемы возникают из-за непонимания того, как работает React.Попробуйте это:

  • myArray, вероятно, из состояния или реквизита.Используйте setState (), чтобы обновить содержимое myArray, вместо этого сделав myArray[i].name = event.target.value; в onChange.Или, если речь идет о реквизите, используйте его для обновления.
  • вы, вероятно, используете props.updateState для запуска повторного рендеринга компонента.Это не должно быть необходимо, если вы описали вещи в предыдущем пункте
...