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 值。