Question

我已在此处要求提供有关该错误的更多信息：Should I ignore React warning: Input elements should not switch from uncontrolled to controlled?。但是我仍然被困住。

因此，我想将一个时间输入字段从保留其自己的值切换为从另一个时间输入字段接管一个值。我正在使用一个简单的“锁定” /“解锁”按钮进行此操作。单击该按钮可以让我选择输入字段是锁定（从其他值接管值）还是未锁定（保留自己的值）。

我在循环内执行此操作，因为每个时间字段将重复7次（每天）。

问题

但是，每次我从常规时间输入字段切换到后面有操作的时间输入字段时，React都会给我以下错误：

一个组件正在更改以下内容的不受控制的输入：输入要控制的时间。输入元素不应从不受控制切换为受控制（反之亦然）。在组件的生命周期中决定使用受控还是不受控制的输入元素

解释下面的代码

注释之间的部分如下：如果当前日期输入字段的锁定状态为“ true”，则输入必须从状态中获取值并执行onchange处理程序。如果为假，则不应执行任何操作并作为基本输入字段做出反应。

我有什么

export class OpeningHoursTable extends Component{
    constructor(props) {
        super(props);
        this.state = {
            sharedInputMo : '',
            empty: undefined
        };
    }
    render() {
        const Days = [{id: 1, day: 'Monday'},{id: 2, day: 'Tuesday'},{id: 3, day: 'Wednesday'},{id: 4, day: 'Thursday'},{id: 5, day: 'Friday'},{id: 6, day: 'Saturday'},{id: 7, day: 'Sunday'}];
        const Table = Days.map(({id, day}) => (
            <div key={id} className='ohTableRow'>
                <div className='ohTableMorning'>
                    <div className='ohTableContentBlock'>{day}</div>
                    <div className='ohTableContentBlock'>
// THIS IS THE PART THAT GIVES ME THE ERROR
                         <input type='time' 
                                value={this.state['lock' + day + '_mo'] === true ? this.state.sharedInputMo || this.state.empty: this.state.empty} 
                                onChange={this.state['lock' + day + '_mo'] === true ? thisInput => this.setState({sharedInputMo : thisInput.target.value }) : null } 
                         />
// THIS IS THE PART THAT GIVES ME THE ERROR
                     </div>

                    <div className='ohTableLockState' onClick={this.state['lock' + day + '_mo'] === true ? () => this.setState({ ['lock' + day + '_mo'] : false }) : () => this.setState({ ['lock' + day + '_mo'] : true }) }>
                        {this.state['lock' + day + '_mo'] === true ?
                            <Icon name='Locked' />
                        :
                            <Icon name='Unlocked' />
                        }
                    </div>

                </div>
            </div>
        ));
        return (
            <div className='ohTable'>
                {Table}
            </div>
        );
    }
}

Answer 1

问题和错误的根源是您提供undefined作为输入值，并且最初没有分配任何onChange事件。

更具体地说，您传递this.state.empty作为值，该状态在状态中分配了undefined，而null作为onChange处理程序。

当react将undefined作为输入值并且没有任何处理程序时，它假定此输入不受控制，并且所有更改将由DOM处理，而react自身不应对其进行任何操作。

但是，稍后，根据用户操作，您的输入将获得另一个值this.state.sharedInputMo和onChange处理程序，该值会将其转换为受控输入。这种变化会引起反应混乱，并向您发出警告。

Answer 2

因此，经过一夜的休息，我解决了自己的问题。
这适用于需要在受控对象和非受控对象之间切换并且具有相同错误的每个人。

使用Switch语句在受控对象和非受控对象之间切换。这样，React会将它们视为独立的对象。因此，在前端，好像您拥有相同的对象。

switch(this.state['lock' + day + '_mo']) {
                case true:
                    return (
                        <div className='ohTableContentBlock'>
                            <input type='time' value={this.state.sharedInputMo} onChange={inputValue => this.setState({sharedInputMo2 : inputValue.target.value })} />
                        </div>
                    );
                case false:
                    return (
                        <div className='ohTableContentBlock'>
                            <input type='time' />
                        </div>
                    );
                default:
                    return (
                        <div className='ohTableContentBlock'>
                            <input type='time' />
                        </div>
                    );
            }

React从受控状态变为不受控制的错误，使我发疯，我在做什么错？

问题

解释下面的代码

我有什么

2 个答案: