Контролируемый / неуправляемый ввод

Question

Почему React жалуется на контролируемый / неконтролируемый ввод?value устанавливается на this.state.text с начала, а this.state.text устанавливается на constructor на ''.

import React from 'react';

class Foo extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            text: '',
        };

        this.textInput = React.createRef();
    }

    _onClick = () => {
        this.setState({
            text: '',
        });

        this.textInput.current.focus();
    }

    _onKeyDown = (event, search) => {
        if (event.keyCode === 27) {
            this.setState({
                text: '',
            });
        }
    }

    _onChange = (event) => {
        this.setState({
            text: event.target.value,
        })
    }

    render() {
        return (
            <React.Fragment>
                <span
                    className={'foo'} >
                    <button

                        onClick={() => this._onClick()} />
                    <input
                        ref={this.textInput}
                        className='bar'
                        type='text'
                        value={this.state.text}
                        placeholder='Kittens...'

                        onKeyDown={event => this._onKeyDown(event)}
                        onChange={event => this._onChange(event)} />
                </span>
            </React.Fragment>
        )
    }
};

Answer 1

Поскольку вы используете и ref={this.textInput}, и value={this.state.text}, я думаю, что он жалуется на использование одного подхода.Обычно мы используем ref для неконтролируемого компонента, а для контролируемого компонента мы используем value реквизит и callbacks, как onChange