Это контролируемый или неконтролируемый компонент React?

Я прочитал ответы на этот вопрос, но ни один из них не похож на мою настройку:

Что такое контролируемые и неконтролируемые компоненты?

У меня есть родительский компонент и много дочерних элементов в качестве входных данных. Каждый ввод имеет defaultValue, который устанавливается с использованием реквизита, полученного от родителя, и проверка ввода выполняется на onBlur. Это связано с тем, что проверка является асинхронной, поэтому onChange будет безумно замедлять работу приложения.

Как называется эта оркестровка? Традиционное определение «управляемого», по-видимому, представляет собой ввод, который обновляется каждые onChange, в то время как «неконтролируемый» ввод — это ввод, который управляет своим собственным внутренним состоянием, доступ к которому позже осуществляется через ref. Моя установка, кажется, не соответствует обоим, сидя где-то посередине - или нет?

Обновление: это CodeSandbox.


reactjs javascript input controlled-component
person Paul Razvan Berg    schedule 05.12.2019    source источник
comment
Было бы полезно, если бы вы опубликовали реальный код, на который мы могли бы посмотреть. Но, по сути, контролируемый просто означает, что React сохраняет состояние формы в состоянии, и HTML отображается на основе этого. Неуправляемый означает, что значения формы хранятся не в состоянии React, а только в самой DOM, что плохо, потому что React должен быть источником правды о том, что представляют собой значения. Синхронны ли ваши обработчики onChange или нет, не имеет значения. reactjs.org/docs/uncontroller-components.html   -  person jered    schedule 06.12.2019
comment
Спасибо за ваш комментарий, @jered. Я обновил вопрос ссылкой на CodeSandbox.   -  person Paul Razvan Berg    schedule 06.12.2019

Ответы (1)


arrow_upward
1
arrow_downward

Если я правильно понимаю вашу настройку, ваши входные данные не контролируются, потому что их состояние хранится в DOM, а не в состоянии React. Проверка — это отдельная задача, которая может выполняться синхронно или асинхронно. Вы можете позволить состоянию React хранить значения, что бы вы ни делали для проверки. Обратите внимание, что в большинстве случаев вы не хотите, чтобы ввод имел даже недопустимое значение — вы просто хотите убедиться, что пользователь не может отправить форму, пока значения недействительны. Таким образом, у вас может быть обработчик onChange для установки некоторого значения состояния, как показано ниже:

<input type="text" 
  value={this.state.myValue} 
  onChange={val => this.setState({myValue: val}, 
    ()=> this validateMyValue(this.state.myValue))}} />

this.validateMyValue может быть асинхронным и делать все, что требуется, если проверка не пройдена. Это был бы контролируемый компонент, делающий то, что вы хотите.

person see sharper    schedule 05.12.2019
comment
Спасибо, см. К сожалению, я делал именно это раньше, и мое приложение все еще было очень, очень медленным. - person Paul Razvan Berg; 06.12.2019
comment
Итак, проблема с производительностью заключается в другом. Асинхронные вызовы в любом случае не должны замедлять работу, поскольку они асинхронны. Вы говорите, что приложение медленное в любом случае? - person see sharper; 06.12.2019
comment
Взглянул на код - теперь я вас лучше понимаю. Согласитесь, что onBlur может быть лучшим местом для проверки в этом случае. Но это не связано с неконтролируемым или контролируемым вводом данных по вашему вопросу. - person see sharper; 06.12.2019
comment
Я знаю, поэтому, возможно, мне вообще не следовало упоминать о проверке в этом вопросе. Простите за это. Итак, суть в том, что это неконтролируемый ввод, потому что он управляет своим собственным состоянием до тех пор, пока onBlur не сработает на более позднем этапе? - person Paul Razvan Berg; 06.12.2019
comment
На самом деле это не имеет ничего общего с onBlur — проверка — это информация о состоянии ввода, а не само состояние. Ввод не контролируется, потому что у вас нет привязки value к state с состоянием обновления onChange. Вот что значит контролируемый. - person see sharper; 06.12.2019