反応制御および非制御組立部品

概要を学習制御および非制御アセンブリのコンポーネントに反応します

まず、制御コンポーネントは、（正式推奨に反応します）

在React中，每当表单的状态发生变化时，都会被写入到组件的state中，
这种组件在React被称为受控组件

コード例：
ユーザーの入力、入力ユーザ名が拘束状態、
e.target.valueによってトリガイベントのonChangeが取得
に対応し、SETSTATEユーザ名を変更すると、ユーザーが入力した値を
値入力ボックスが変更されました

import React, {PureComponent} from "react"
import {PropTypes} from 'prop-types';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

export default class Form extends React.Component {
    constructor(props) {
        super(props)
    }
    state = {
        username:"你我贷"
    }
    handleChange = (e) => {
        let name = e.target.value;
        this.setState({
            username: name
        })
    }
    render() {
        return (
            <div>
                <div>{this.state.username}</div>
                <input type="text" value={this.state.username} onChange={this.handleChange}/>
            </div>
        )
    }
}

要約：

値は、初期状態では値によって動的に設定することができます
たび、フォームの値が変更さは、onChangeイベントハンドラを呼び出します。あなたがのonChangeを追加することなく、（対応するラジオボタンやチェックボックスがオンになっている）の値を追加した場合に反応警告が表示されます
GET eを合成して、イベントハンドラの状態変化イベントオブジェクト、および状態を更新します。
SETSTATEトリガービューを再レンダリング、更新価値フォームコンポーネントを完了

非制御部品

表现形式上，react 中没有添加 value 属性（单选按钮和复选框对应的是checked）
的表单组件元素就是非受控组件

render() {
    return (
        <div>
            <input type="text" />
        </div>
    )
}

要約：

即ち、非制御コンポーネントは、データ取得操作DOMに相当する状態によって制御されていません。
非制御の利点は、組み立て簡単で、サードパーティ製のコンポーネントの組み合わせです。

制御されていない成分は二つの方法値入力ボックスを取得します

最初の方法：機能

因为不受控组件的数据来源是 DOM 元素，所以一般情况下不受控组件我们使用ref来获取DOM元素进行操作。即在虚拟DOM节点上使用ref，并使用函数，将函数的参数挂载到实例的属性上

import React, {PureComponent} from "react"
import {PropTypes} from 'prop-types';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

export default class Form extends React.Component {
    constructor(props) {
        super(props)
    }
    handleSubmit = (e) => {
        e.preventDefault();
        console.log(this.username)
        console.log(this.username.value)

    }
    render() {
        return (
            <div>
                <input type="text" ref={(node)=> this.username= node} />
                <br/><br/>
                <button onClick={this.handleSubmit}>click</button>
            </div>
        )
    }
}

第二の方法：コンストラクタ宣言を介して

实例的构造函数 constructor 这创建一个引用， 在虚拟DOM节点上声明一个ref属性，
并且将创建好的引用赋值给这个ref属性，react会自动将输入框中输入的值
放在实例的second属性上

import React, {PureComponent} from "react"
import {PropTypes} from 'prop-types';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

export default class Form extends React.Component {
    constructor(props) {
        super(props)
        // 在构造函数中创建一个引用
        this.username = React.createRef();
    }
    handleSubmit = (e) => {
        e.preventDefault();
        console.log(this.username)
        console.log(this.username.current)
        console.log(this.username.current.value)
    }
    render() {
        return (
            <div>
                <input type="text" ref={this.username} />
                <br/><br/>
                <button onClick={this.handleSubmit}>click</button>
            </div>
        )
    }
}

要するに：

在react中，只有input=(text number email。。。。) textarea select(单选) 标签
可以做成受控组件， input=(radio checkbox...)不能做成受控组件

制御コンポーネントはの機能です

バインド値の値
ev.target.valueを受け、イベント内で変更イベントを達成するため、バインドされた状態での値に値をリセット

{/* 受控组件 */}
<input type="text" value={this.state.value} onChange={this.changeAction.bind(this)}/>

{/* 非受控组件 */}
<input type="text" ref="input"/>
<button onClick={this.btnAction.bind(this)}>获取</button>

します。https：//juejin.im/post/5c8f6bed5188252db82a5901より転載

yuzhenliuMe

公開された23元の記事・ウォン称賛33 ・ビュー1312

プライベートの手紙の懸念

反応制御および非制御組立部品

おすすめ