Контролируемые и неконтролируемые компоненты в React

внешний интерфейс React.js
Контролируемые и неконтролируемые компоненты в React

В React так называемые контролируемые компоненты и неконтролируемые компоненты предназначены для форм.

Компонент, управляемый формой

  • Элементы формы зависят от состояния.Когда элементу формы требуется значение по умолчанию для сопоставления с состоянием в режиме реального времени, это контролируемый компонент, аналогичный двусторонней привязке.
  • Для контролируемых компонентов изменение элементов формы будет сопоставляться со значением состояния в режиме реального времени, и в это время может быть проверено входное содержимое.
  • Управляемые компоненты могут иметь состояние только в том случае, если они расширяют React.Component.
  • Управляемый компонент должен использовать событие onChange в форме для привязки соответствующего события.
class Control extends React.Component {
    // 这样的写法也是声明在实例上的对象
    state = {// 给组件状态设置默认值，在实时修改时进行校验
        username: "zf",
        pwd: "123"
    }

    // e为原生的事件绑定对象
    handleChange = (e) => {
        // 获取原生对象上的属性
        let name = e.target.name;
        // 根据表单元素的name名称进行匹配，比如用户名的name是username，那新输入的值将更新原来的值
        this.setState({
            [name]: e.target.value
        })
    }

    render() {
        return (
            <div>
                <p>{this.state.username}</p>
                用户名：<input
                    name="username"
                    type="text"
                    value={this.state.username}
                    onChange={this.handleChange} /> <br />

                <p>{this.state.pwd}</p>
                密码：<input
                    name="pwd"
                    type="text"
                    value={this.state.pwd}
                    onChange={this.handleChange} /> <br />
            </div>
        )
    }
}

Контролируемый компонент отображает результаты

Как, этот эффект очень похож на двустороннюю привязку?

Уведомление:

  • В контролируемом компоненте, если событие onChange не привязано к полю ввода, вы получите предупреждение от реакции
  • И в это время в поле ввода нельзя вводить никакие другие параметры, кроме значения по умолчанию.
class Control extends React.Component {
    constructor() {
        super();
        this.state = {
            username: "zds",
            age: 10
        }
    }
    render() {
        return (
            <div>
                username:<input
                    type="text"
                    name="username"
                    value={this.state.username} /><br />
                age:<input
                    type="text"
                    name="age"
                    value={this.state.age} />
            </div>
        )
    }
}

Результат можно увидеть на следующем рисунке:

  • Поле ввода не привязано к событию onChange, и значение в поле ввода не может быть изменено.
  • вызовет предупреждение о реакции

неконтролируемые компоненты

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

Два способа получить значение в поле ввода

  • Функция ref такая же, но запись отличается, что позволяет нам манипулировать DOM.

Первый способ — функция

  • Используйте ref на узле виртуального DOM и используйте функцию для подключения параметров функции к свойствам экземпляра.
handleSubmit = (e) => {
    // 阻止原生默认事件的触发
    e.preventDefault();
    console.log(this.username.value);
}
render() {
    return (
        <form onSubmit={this.handleSubmit}>
            {/* 将真实的DOM，username是输入框中输入的值赋值给组件实例上
                这样，在页面表单提交的时候就可以通过this.username.value获取到输入框输入的值
            */}
            用户名<input
                name="username"
                type="text"
                ref={username=>this.username=username}
            /><br />
        </form>
    )
}

Теперь давайте посмотрим, как первый неконтролируемый способ получить значение поля ввода:

Второй способ: через объявление конструктора

  • реагировать 16.3 новый синтаксис
  • Конструктор экземпляра, создающий ссылку
  • Объявите атрибут ref на узле виртуального DOM и назначьте созданную ссылку атрибуту ref.
  • реакция автоматически поместит значение, введенное в поле ввода, во второе свойство экземпляра
constructor(){
    super();
    // 在构造函数中创建一个引用
    this.second=React.createRef();
}
handleSubmit = (e) => {
    // 阻止原生默认事件的触发
    e.preventDefault();
    console.log(this.second.current.value);
}
render() {
    return (
        <form onSubmit={this.handleSubmit}>
            {/* 自动将输入框中输入的值放在实例的second属性上 */}
            密码<input
                name="password"
                type="text"
                ref={this.second}
            /><br />
        </form>
    )
}

Теперь давайте посмотрим, как работает второй неуправляемый способ получения значения поля ввода:

Ну, контролируемые и неконтролируемые компоненты формы в реакции будут отсортированы здесь в первую очередь.Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение для связи!

Категории