javascript - 受控/非受控输入

Question

为什么 React 提示受控/不受控输入？ value一开始就设置为this.state.text，this.state.text在constructor中设置code> 到 ''。

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