ReactJS переключение входного элемента с контролируемого на неуправляемый с заданным значением

Question

Часть моего кода, которая не работает, выглядит следующим образом:

const normalizeInput = (value, previousValue) => {
    if (!value) return value;
    const currentValue = value.replace(/[^\d]/g, '');
    const cvLength = currentValue.length;

    if (!previousValue || value.length > previousValue.length) {
    if (cvLength < 4) return currentValue;
    if (cvLength < 7) return `(${currentValue.slice(0, 3)}) ${currentValue.slice(3)}`;
    return `(${currentValue.slice(0, 3)}) ${currentValue.slice(3, 6)}-${currentValue.slice(6, 10)}`;
    }
    else {
       if (cvLength < 4) return currentValue;
       if (cvLength < 7) return `(${currentValue.slice(0, 3)}) ${currentValue.slice(3)}`;
    }
};


class Example extends Component {

constructor(props) {
    super(props);

    console.log(JSON.stringify(props))

    this.state = {
        editable: {},
        phoneNumber: '(123) 555-1234'
    }
}

handlePhoneChange(id, value) {
    this.setState(prevState=> ({ [id]: normalizeInput(value, prevState[id]) }));
};

render(){
    return(

        <input
        type="text"
        className="form-control react-form-input"
        id="phoneNumber"
        name="phoneNumber"
        value={this.state.phoneNumber}
        onChange={(e) => {this.handlePhoneChange('phoneNumber', e.target.value)}}
        />

    )}
}

Он будет выдавать жалобу как

Компонент изменяет контролируемый ввод текста типа на неуправляемый. Элементы ввода не должны переключаться с контролируемого на неуправляемый

при value={this.state.phoneNumber}

, но когда я установлю его как value={this.state.phoneNumber || ''}, не будет, но при изменении удалит целое phoneNumber значение вместо символа.

Любые советы по этому поводу?

Answer 1

Это происходит потому, что ваш normalizeInput ничего не возвращает, когда value.length <= previousValue.length (, когда вы что-то удаляете * )

Таким образом, undefined сохраняется в вашем состоянии и затем задается как value к вашему input, что фактически делает его неуправляемым.

---

|| '' исправляет это, потому что, когда ваше значение равно undefined, вы пропускаете пустую строку '' и, таким образом, input никогда не получает значение undefined.