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

ReactJS以定义的值状态将输入元素从受控状态切换为非受控状态

1 个答案: