React (tres) - Reaccionar formar componentes no controlados de los componentes controlados

Others 2020-03-30 23:09:36 views: null

directorio

1. Formulario

1.1 Componentes El controladas

1.1.1input

1.1.2textarea

Radio 1.1.3select--

1.1.4select-- opción múltiple

 1.1.5 Radio

1.2 componentes no controlada --Refs & DOM (DOM elemento de operación)

propiedad 1.2.1ref

1.2.2 devolución de llamada Refs

1.2.3React.createRef ()

2. Recomendaciones

1. Formulario

En Reaccionar años, HTML funciona elementos de encofrado y otras DOM elemento es algo diferente.

En general, la forma y los controles de formulario (tales como: entrada, seleccione ......) es una página con JavaScript tratar con la mayor parte de los elementos. Si bien podemos REF para operar su forma, pero eso sería más problemas, React.js proporciona una manera mejor para nosotros React.js correlacionar los datos y controles lógicos y forma .

1.1 Componentes El controladas

  • 受控组件: Con los apoyos datos entrantes, pueden considerarse los componentes controlados (debido a que los componentes se pasan puntales de control de los padres)
  • 非受控组件: Los datos de control de datos apoyos entrantes externo, solamente almacena en el componente interno estado , entonces un componentes no controladas (porque el exterior no se puede controlar directamente el estado )

En términos generales, cualquier elemento de la página es un componente independiente, controles de formulario es que va a mantener el estado interno de su propio (como por ejemplo: valor, seleccionado, comprobado ......) , por supuesto, estos estados son antiguos alumnos logran, en lugar de React.js controlado, pero a veces la esperanza React.js para gestionar y mantener el estado de los controles de formulario, que llamamos este control (controles) conocidos como: componentes controlados , diferentes componentes, estado El mantenimiento también formas diferentes

  • entrada
  • área de texto
  • Seleccione

A través de estado a un componente de control de estado

  • Crear un estado y un estado estructura de encuadernación
  • Algunos componentes detectar eventos para actualizar el estado

Cómo convertirse en un componentes no controladas componentes controlados?

  • componentes de entrada no controlada, el mantenimiento de los datos privados internos (valor), que pasa a partir del parámetro de los apoyos de control externo;
  • componentes no controlados de transformarse en un componentes controlados: por monitores onChange cambios en los datos, y a continuación, obtener de destino después de deconstrucción del objeto de evento, y luego el interior de datos

La <tipo de valor de entrada de "texto" = {this.state.v1} / => componentes no controladas, el valor de valor, por sí mismos ayudan a mantener su propio estado interno de los cambios externos, no recibe parámetros externos apoyos pasados. En este punto desea cambiar la entrada después de que el cuadro de entrada, la entrada de los cambios de valor son también posible, que es componentes no controladas.

Al escuchar montaje incontrolada onChange evento onChange = {this.changeValue}, this.changeValue = this.changeValue.bind (esto) unión, esta vez se le dará un objeto de evento método CambiarValor (parámetro de evento es el primero objeto), el objeto se puede obtener a través del valor de entrada de evento, <tipo de entrada = valor de "texto" = {this.state.v1} onChange = {this.changeValue} /> unido a la caja de entrada de valor.

CambiarValor ({target: {valor: v1}}) {
        this.setState ({
            v1
        });
    }

1.1.1input

Controlado propiedad  valor de  la propiedad.

import React from 'react';

class CanControll extends React.Component{
    constructor(props){
        super(props);
        //1.创建state状态，使val与input的value值进行绑定
        this.state = {
            val:'kaikeba'
        }
        this.changeVal = this.changeVal.bind(this);
    }

    //2.监听组件onChange事件来更新state
    //将target解构出来，再对里面的对象进行解构，赋值给别名val
    changeVal({target:{value:val}}){
        // const user = {
        //     id: 123,
        //     name: 'hehe',
        //     education: {
        //       degree: 'Masters'
        //     }
        //   };
        //   const {education: {degree:vala}} = user;
        //   console.log(vala); //prints: Masters
        
        //注意setState()是方法
        this.setState({
            val
        })
    }

    // changeVal(e) {
    //     this.setState({
    //         val: e.target.value
    //     });
    // }

    render(){
        return(
            <div>
                <input type="text" value={this.state.val} onChange={this.changeVal} />
                <hr/>
                {this.state.val}      
            </div>
        );
    }
}

export default CanControll;

Por los componentes controlados, puede ser más conveniente la interacción de componentes de control

...
changeValue({target:{value}}) {
    this.setState({
            v1: value.toUpperCase()
    });
}
...

1.1.2textarea

área de texto y entrada de  un principio similar, pero hay que señalar que: uso valor , en lugar de los contenidos ( el innerHTML )

// 正确
<textarea value={this.state.v2} onChange={this.changeValue2} cols="30" rows="10"></textarea>
// 错误
<textarea onChange={this.changeValue2} cols="30" rows="10">{this.state.v2}</textarea>

Radio 1.1.3select--

seleccione las React.js también realiza algún tratamiento, ya no por el seleccionado para representar la propiedad elemento seleccionado, sino por seleccionar las etiquetas de valor atributos.

NOTA: Cuando se utiliza la estructura {target: {} opciones, desde las opciones de configuración

import React from 'react';

/**
 * select的非受控组件
 */
class CanControll extends React.Component {
    constructor(props) {
        super(props);
        //1.创建state状态，使val与input的value值进行绑定
        this.state = {
            val: 'html'
        }
        this.changeVal = this.changeVal.bind(this);
    }

    //2.监听组件onChange事件来更新state
    //将target解构出来，再对里面的对象进行解构，赋值给别名val
    changeVal({target:{options}}) {
        this.setState({
            val:options
        })
    }

    render() {
        return (
            <div>
                <select value={this.state.val} onChange={this.changeValue3}>
                    <option value="html">html</option>
                    <option value="css">css</option>
                    <option value="javascript">javascript</option>
                </select>
                <hr/>
                <div>{this.state.val}</div>
                
            </div>
        );
    }
}

export default CanControll;

1.1.4 SELECT - opción múltiple

También podemos configurar opciones múltiples del SELECT , el correspondiente valor es una matriz

...
this.state = {
    v4: ['html', 'javascript']
}
...
​
...
changeValue4({target:{options}}) {
  this.setState({
    v4: [...options].filter(o=>o.selected).map(o=>o.value)
  });
}
...
​
...
<select value={this.state.v4} onChange={this.changeValue4} multiple>
    <option value="html">html</option>
    <option value="css">css</option>
    <option value="javascript">javascript</option>
</select>
...

Ejemplo:

import React from 'react';

/**
 * select（多选：从多个选项中选择一个）的非受控组件
 */
class CanControll extends React.Component {
    constructor(props) {
        super(props);
        //1.创建state状态，使val与input的value值进行绑定
        this.state = {
            //select多选时，对应的 value 就是一个数组
            val: ['html','js']
        }
        this.changeVal = this.changeVal.bind(this);
    }

    //2.监听组件onChange事件来更新state
    changeVal({ target: { options } }) {
        this.setState({
            //因为select多选对应的value是数组，所以通过扩展运算符，将options中所有值展开到数组中
            val:  [...options].filter(o=>o.selected).map(o=>o.value)
        })
    }

    render() {
        return (
            <div>
                <select value={this.state.val} onChange={this.changeVal} multiple>
                    <option value="html">html</option>
                    <option value="css">css</option>
                    <option value="javascript">javascript</option>
                </select>
                <hr />
                {this.state.val.join(',')}

            </div>
        );
    }
}

export default CanControll;

 1.1.5 Radio

de radio y la siguiente casilla hay que señalar que la propiedad controlada ya no es un valor , pero comprueban

...
this.state = {
    v5: '女',
        v6: ['前端', '后端'],
}
​
...
changeValue5(e) {
    this.setState({
        v5: e.target.value
    });
}
​
changeValue6({target:{value}}) {
    let {v6} = this.state;
    if (v6.includes(value)) {
        v6 = v6.filter(v=>v!==value);
    } else {
        v6.push(value)
    }
    this.setState({
        v6
    });
}
...
​
...
<label><input name="gender" type="radio" value="男" checked={this.state.v5==='男'} onChange={this.changeValue5} />男</label>
<label><input name="gender" type="radio" value="女" checked={this.state.v5==='女'} onChange={this.changeValue5} />女</label>
​
<label><input name="interest" type="checkbox" value="前端" checked={this.state.v6.includes('前端')} onChange={this.changeValue6} />前端</label>
<label><input name="interest" type="checkbox" value="后端" checked={this.state.v6.includes('后端')} onChange={this.changeValue6} />后端</label>
...

Ejemplo:

import React from 'react';

/**
 * radio和checkbox的非受控组件
 */
class CanControll extends React.Component {
    constructor(props) {
        super(props);
        //1.创建state状态，使val与input的value值进行绑定
        this.state = {
            v5: '女',
            v6: ['前端', '后端'],
        }
        this.changeValue5 = this.changeValue5.bind(this);
        this.changeValue6 = this.changeValue6.bind(this);
    }

    //2.监听组件onChange事件来更新state
    changeValue5({ target: { value: v5 } }) {
        this.setState({
            v5
        });
    }

    changeValue6({ target: { value } }) {
        let { v6 } = this.state;
        if (v6.includes(value)) {
            v6 = v6.filter(v => v !== value);
        } else {
            v6.push(value)
        }
        this.setState({
            v6
        });
    }

    render() {
        return (
            <div>
                <label><input name="gender" type="radio" value="男" checked={this.state.v5 === '男'} onChange={this.changeValue5} />男</label>
                <label><input name="gender" type="radio" value="女" checked={this.state.v5 === '女'} onChange={this.changeValue5} />女</label>

                <label><input name="interest" type="checkbox" value="前端" checked={this.state.v6.includes('前端')} onChange={this.changeValue6} />前端</label>
                <label><input name="interest" type="checkbox" value="后端" checked={this.state.v6.includes('后端')} onChange={this.changeValue6} />后端</label>
            </div>
        );
    }
}

export default CanControll;

1.2 componentes no controlada - Refs & DOM (DOM elemento de operación)

Por otra parte, en el estudio anterior, sabemos que cada uno de los componentes controlados, y diferentes estados pueden controlar los tipos de componentes controlados solamente tan pocos: el valor , la marcada , pero es en realidad un componente del estado mucho más de lo éstos, tales como entrada de enfoque de estado, personas con discapacidad, de sólo lectura, todos los componentes, si cada estado es administrado por la manera anterior, serían particularmente problemático. No con reaccionar y Vue y otros marcos necesitan para operar después de que los elementos DOM, y esta vez, tenemos que hacer frente a la inversa: DOM

Refs & DOM

React.js ofrece varias maneras de obtener DOM elementos:

  • devolución de llamada Refs

  • React.createRef ()

propiedad 1.2.1ref

Ya sea de devolución de llamada Refs o React.createRef () , es requerido por una propiedad ref ser conjunto. Cuando un valor de la función del atributo ref .

<input ref={?} />

Ejemplo:

import React from 'react';

/**
 * 非受控组件：回调refs——获取元素信息
 */
class CanControll extends React.Component {
    constructor(props) {
        super(props);
        this.selectURL = this.selectURL.bind(this);
        this.getElementInfo = this.getElementInfo.bind(this);

        //使用React.createRef()需要在构造函数中挂载
        this.refDiv = React.createRef();
    }

    //获取复制信息
    selectURL(){
        //选中input的内容
        this.refInput.select();
        console.log(this.refInput.value);
    }

    //获取元素信息
    getElementInfo(){
        console.log(this.refDiv.current.offsetHeight);
        
    }

    render() {
        return (
            <div>
                {/* 此处el=>this.refInput = el 相当于方法
                    function(el){
                        this.refInput = el;//将当前元素el复制给this.refInput,但是此处this指向undefined，所以需要使用箭头函数
                    }
                */}
                <input ref={el=>this.refInput = el} type="text" value="http://kaikeba.com" />
                <button onClick={this.selectURL}>点击复制</button>
                <hr />
                <button onClick={this.getElementInfo}>获取元素信息</button>
                <div ref={this.refDiv} style={{ width: '100px', height: '100px', background: 'red' }}></div>
            </div>

        );
    }
}

export default CanControll;

 

1.2.2 devolución de llamada Refs

De esta manera, hemos utilizado en el anterior sobre

class UnControlledComponent extends React.Component {
    constructor(props) {
        super(props);
        this.selectURL = this.selectURL.bind(this);
        this.getElementInfo = this.getElementInfo.bind(this);
    }
  
    selectURL() {
        this.refInput.select();
    }
​
    getElementInfo() {
        this.refDiv.getBoundingClientRect()
    }
  
    render() {
        return (
            <input ref={el => this.refInput = el} type="text" value="http://kaikeba.com" />
            <button onClick={this.selectURL}>点击复制</button>
            <hr/>
            <button onClick={this.getElementInfo}>获取元素信息</button>
            <div ref={el => this.refDiv = el} style={{width: '100px', height:'100px',background:'red'}}></div>
        )
    }
}

1.2.3React.createRef ()

Este método devuelve un objetos al árbitro , en JSX por ref propiedad del objeto, el objeto de enlace bajo actuales puntos de atributo a un elemento o objetos componentes unido 

class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
    }
​
    hello() {
        console.log('ChildComponent');
    }
​
    render() {
        return(
            <div>
                <h2>ChildComponent</h2>
            </div>
        );
    }
}
​
class UnControlledComponent extends React.Component {
    constructor(props) {
        super(props);
        this.selectURL = this.selectURL.bind(this);
        this.getElementInfo = this.getElementInfo.bind(this);
      
        this.refInput = React.createRef();
        this.refDiv = React.createRef();
        this.refChild = React.createRef();
    }
  
    selectURL() {
        this.refInput.current.select();
    }
​
    getElementInfo() {
        this.refDiv.current.getBoundingClientRect()
    }
  
    getElementInfo() {
        this.refChild.current;
    }
  
    render() {
        return (
            <input ref={this.refInput} type="text" value="http://kaikeba.com" />
            <button onClick={this.selectURL}>点击复制</button>
            <hr/>
            <button onClick={this.getElementInfo}>获取元素信息</button>
            <div ref={this.refDiv} style={{width: '100px', height:'100px',background:'red'}}></div>
            <hr/>
            <ChildComponent ref={this.refChild} />
            <button onClick={this.getReactComponent}>获取 React 实例对象</button>
        )
    }
}

2. Recomendaciones

  • Trate de evitar los apoyos derivados en estado
  • Trate de usar los apoyos , evitar el uso de estado
1275012490
Publicado 95 artículos originales · ganado elogios 115 · vistas 120 000 +
carta privada preocupaciones

Supongo que te gusta

Origin blog.csdn.net/qq_34569497/article/details/105181659
Recomendado
Clasificación
Diario
Más
2024-05-17(4)
2024-05-16(22)
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)

Code World

© 2018 codetd.com