Какие условия заставляют компонент React быть контролируемым / неконтролируемым? У меня есть пример, где он изменяется?

#reactjs

#reactjs

Вопрос:

Итак, я просто покажу вам code…it работает, когда я вызываю:

 onChange={e => this.onTextChange('payment_amount', e, 'float')}/>
  

…когда payment_amount включен непосредственно this.state …но когда я называю его вложенным…

 onChange={e => this.onTextChange('outgoingPayment.payment_amount', e, 'float')}/>
  

… Я получаю сообщение об ошибке, в котором сообщается, что оно переходит из контролируемого / неконтролируемого, и я не понимаю, что это делает. Я приведу соответствующие функции ниже…они работают с точки зрения предположения, что этот реквизит находится на this.state …Мне пришлось привести Payment объект в состояние, чтобы вызвать рабочую версию.

На самом деле, я думаю, что есть runFunc() …но он просто вернул пустую функцию — та, которую вы передали, не является функцией или неопределенной или что-то в этом роде.

 onTextChange(columnKey, e, numberKind = null, runAfter = null) {
  var self = this;
  var container = {};
  var value = e.target.value;
  if(columnKey.includes('.')) {
    container = getNestedProp(self.state, columnKey, -1);
    if(!container) return;
    var prop = getNestedPropName(self.state, columnKey);
    container[prop] = e.target.value;
    value = container;
    columnKey = getNestedPropName(self.state, columnKey, -1);
  }
  var finalValue = value;
  if(isGood(numberKind)) {
    switch(numberKind) {
      case 'float': finalValue = parseFloat(value); break;
      case 'integer': finalValue = parseInt(value); break;
    }
    // allow for backspace
    if(value === '') finalValue = '';
    // convert whatever is entered
    else if(isNaN(finalValue)) finalValue = 0;
  }
  console.log('finalValue', finalValue);
  self.setState({[columnKey]: finalValue}, () => runFunc(runAfter)());
}

function getNestedProp(container, propString, offset = 0) {
  if(offset > 0)
    alert('getNestedProp(): use negative numbers to offset from end');
  var props = propString.split('.');
  var _ref = container;
  for(var i = 0; i < props.length   offset; i  ) {
    if(!_ref) throw('error: _ref is null or undefined');
    _ref = _ref[props[i]];
  }
  return _ref;
}

function getNestedPropName(container, propString, offset = 0) {
  if(offset > 0)
    alert('getNestedPropName(): use negative numbers to offset from end');
  var props = propString.split('.');
  var propName = '';
  var _ref = container;
  for(var i = 0; i < props.length   offset; i  ) {
    if(!_ref) throw('error: _ref is null or undefined');
    propName = props[i];
    _ref = _ref[propName];
  }
  return propName;
}
  

Ответ №1:

Я не знаю, почему, когда я захожу достаточно далеко, я в конечном итоге задаю вопрос о стеке для чего-то…когда я смотрю на то, что я собрал в question…it приходит ко мне 9 раз из 10…lolsigh.

Версия вложенных реквизитов не работает для настройки состояния, как у меня … только если плоская опора находится непосредственно в состоянии … необходимо установить возможность установки container[prop] = value then setState({[container]: container}) , прежде чем это сработает, кажется.

Извините, если кто-то зря потратил свое время. Должен ли я удалить вопрос в этом случае или оставить его для исторических целей?