Изменение реакции реагирует на неконтролируемую ошибку, которая сводит меня с ума, что я делаю не так? - PullRequest
Новая
       8

Изменение реакции реагирует на неконтролируемую ошибку, которая сводит меня с ума, что я делаю не так?

0 голосов
/ 06 декабря 2018

Я запросил дополнительную информацию об ошибке здесь: Должен ли я игнорировать предупреждение React: элементы ввода не должны переключаться с неуправляемых на управляемые? .Но я все еще застрял ..

Так что у меня есть случай, когда я хочу переключить поле ввода времени с хранения его собственного значения на получение значения из другого поля ввода времени.Я делаю это с помощью простой кнопки «заблокировано» / «разблокировано».Нажатие на эту кнопку позволяет мне выбрать, является ли поле ввода заблокированным (принимает значение у других) или разблокированным (сохраняет свое значение).Я делаю это внутри цикла, потому что каждое поле времени будет повторяться 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>
        );
    }
}

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

Так что после ночного отдыха я решил собственную проблему.Это для всех, кому нужно переключаться между контролируемым и неконтролируемым объектом и имеет ту же ошибку.Используйте оператор 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>
                    );
            }
0 голосов
/ 06 декабря 2018

Корень вашей проблемы и ошибки в том, что вы вводите undefined в качестве значения для ввода и не назначаете изначально никакого события onChange.

Более конкретно, вы передаете this.state.empty в качестве значения, которому присваивается undefined в состоянии и null как обработчик onChange.

Когда реагирующий получает undefined в качестве значения ввода и без обработчика, он предполагает, что этот вход не контролируетсяи все изменения будут обрабатываться DOM, и сама реакция не должна ничего с ним делать.

Но позже, на основе действий пользователя, ваш ввод получит другое значение this.state.sharedInputMo и onChangeобработчик, который превращает его в контролируемый ввод.Это изменение вызывает путаницу реакции и дает вам это предупреждение.

...