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 || ''} value={this.state.phoneNumber || ''}不會，但隨后更改將刪除整個phoneNumber值而不是字符。

任何提示？

Answer 1

發生這種情況是因為您的normalizeInput在value.length <= previousValue.length （當您刪除某些內容時）時不返回任何內容

因此undefined會存儲在您的狀態中，然后作為value給您的input ，實際上使其不受控制。

---

|| '' || ''解決了這個問題，因為當您的值undefined您會傳遞''空字符串，因此input永遠不會收到undefined值。