javascript - 受控/非受控输入

Question

为什么React抱怨受控/不受控的输入？从头开始value设置为，并在to中设置。this.state.textthis.state.textconstructor''

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>
        )
    }
};

标签： javascriptreactjsinput

Answer 1

由于您同时使用两者ref={this.textInput}，value={this.state.text}所以我认为它在抱怨使用一种方法。通常我们使用ref非受控组件和受控组件我们使用value道具callbacks等onChange