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

受控/非受控输入

1 个答案: