Reagir (três) - reagir formar componentes não controladas dos componentes controlados

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

anuário

1. Formulário

1.1 componentes A controlados

1.1.1input

1.1.2textarea

rádio 1.1.3select--

1.1.4select-- escolha múltipla

 1.1.5 Radio

1.2 componentes controlados não---Refs & DOM (DOM elemento de operação)

propriedade 1.2.1ref

1.2.2 callback Refs

1.2.3React.createRef ()

2. Recomendações

1. Formulário

Em Reagir anos, HTML funciona elementos de formulário e outras DOM elemento é um pouco diferente.

Em geral, a forma e os controles de formulário (tais como: entrada, selecione ......) é uma página com JavaScript lidar com a maioria dos elementos. Enquanto podemos ref para operar sua forma, mas isso seria mais problemas, React.js fornece uma maneira melhor para nós React.js correlacionar os dados e controles lógicos e forma .

1.1 componentes A controlados

  • 受控组件: Com suportes dados de entrada, os componentes podem ser considerados controlados (porque os componentes são passados suportes de controlo parental)
  • 非受控组件: Os dados de controlo de dados suportes de entrada externo, armazenados apenas no componente interno estado , então um dos componentes não-controlada (porque o exterior não pode controlar directamente o estado )

Em termos gerais, qualquer elemento da página é um componente separado, controles de formulário é que eles vão manter o estado interno do seu próprio (tais como: valor, selecionado, verificada ......) , é claro, esses estados são ex-alunos a alcançar, ao invés de React.js controlado, mas às vezes nós esperamos React.js para gerenciar e manter o estado de controles de formulário, nós chamamos isso de controle (controles) conhecidos como: componentes controlados , componentes diferentes, estado A manutenção também maneiras diferentes

  • entrada
  • textarea
  • selecionar

Através do estado a um componente de controle do Estado

  • Criar um estado e um estado de montagem de ligao
  • Alguns componentes ouvir eventos para atualizar o estado

Como se tornar um componentes não controlados componentes controlados?

  • entrada não controlado componentes, mantendo os dados privados internos (valor), passando a partir do parâmetro de suportes de controlo externo;
  • componentes descontrolados de se transformar em um componentes controlados: por monitorar onChange alterações aos dados, e em seguida, obter-alvo após a desconstrução do objeto de evento, e em seguida, obter o interior de dados

O <tipo de valor de entrada "texto" = {this.state.v1} / => componentes não controlados, valor valor, por si só ajudam a manter seu próprio estado interno das mudanças externas, não recebe parâmetros externos passaram adereços. Neste ponto, você quer mudar a entrada após a caixa de entrada, a entrada das alterações de valor também são possíveis, que é componentes não controlados.

Ao ouvir montagem descontrolada onChange evento onChange = {} this.changeValue, this.changeValue = this.changeValue.bind (isso) a ligação, será dada desta vez um objecto evento método ChangeValue (parâmetro de evento é o primeiro objeto), o objeto pode ser obtido através do valor de entrada evento, <input type = valor "text" = {} this.state.v1 onChange = {this.changeValue} /> obrigado a caixa de entrada de valor.

ChangeValue ({alvo: {valor: v1}}) {
        this.setState ({
            v1
        });
    }

1.1.1input

Controlado propriedade  valor  propriedade.

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 os componentes controlados, pode ser mais conveniente interacção componente controle

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

1.1.2textarea

área de texto e de entrada de  um princípio semelhante, mas deve notar-se que: o uso valor , em vez do conteúdo ( a 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>

rádio 1.1.3select--

selecionar os React.js também feito algum tratamento, não mais por selecionada para representar a propriedade do elemento selecionado, mas por escolha a tag valor atributos.

NOTA: Ao usar a estrutura {alvo: {opções}, entre as opções de configuração

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 - escolha múltipla

Também pode definir múltipla escolha o SELECT , o correspondente valor é um array

...
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>
...

exemplo:

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

rádio ea seguinte caixa de seleção deve ser notado que a propriedade controlada não é mais um valor , mas verifiquei

...
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>
...

exemplo:

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 não controladas - Refs & DOM (DOM elemento de operação)

Então, novamente, pelo estudo acima, sabemos que cada um dos componentes controlados e estados diferentes podem controlar os tipos de componentes controlados somente assim alguns: valor , a verificada , mas é na verdade um componente do estado muito mais do que estes, tais como entrada foco status, pessoas com deficiência, só de leitura, todos os componentes, se cada estado é gerido pela forma acima, seria particularmente problemático. Não com Reagir e Vue e outras estruturas precisam operar após os elementos DOM, e desta vez, temos de abordar o outro lado: DOM

Refs & DOM

React.js fornece várias maneiras de obter DOM elementos:

  • callback Refs

  • React.createRef ()

propriedade 1.2.1ref

Quer callback Refs ou React.createRef () , é exigido por uma propriedade ref a ser definido. Quando um valor da função do atributo ref .

<input ref={?} />

exemplo:

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 callback Refs

Desta forma, temos utilizado nos mais anterior

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 retorna um ref objectos , em JSX por ref propriedade do objecto, o objecto de ligação sob actuais pontos de atributos para um elemento ou objectos componentes ligados 

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. Recomendações

  • Tente evitar os adereços derivados no estado
  • Tente usar adereços , evitar o uso de estado
1275012490
Publicado 95 artigos originais · Louvor obteve 115 · vista 120 000 +
carta particular preocupações

Acho que você gosta

Origin blog.csdn.net/qq_34569497/article/details/105181659
Recomendado
Clasificación
Diario
Más
2024-06-05(0)
2024-06-04(0)
2024-06-03(0)
2024-06-02(0)
2024-06-01(0)
2024-05-31(0)
2024-05-30(0)
2024-05-29(0)
2024-05-28(0)
2024-05-27(0)

Code World

© 2018 codetd.com