reaccionar Day03 React props / eventos / formas / todolist

componente de reacción

El nombre del sufijo del componente de reacción puede ser js o jsx

• Necesita configurar el analizador de paquetes web y el nombre de sufijo predeterminado
  
  
• Código de reestructuración
  
  
  

Reaccionar accesorios

• La principal diferencia entre el estado y los accesorios es que los accesorios son inmutables y el estado se puede cambiar de acuerdo con la interacción del usuario.
• El componente en sí usa estado, y los accesorios se usan entre componentes (los datos en el componente en sí en vue, y los valores se pasan entre componentes)

Caso básico de accesorios

Valor de paso del componente padre-hijo

• El componente principal agrega una propiedad personalizada donde se llama al componente secundario. El valor de la propiedad es el valor que debe pasar al componente secundario. Si el valor de la propiedad es un número variable, booleano, debe usar el paquete {}

Obtenga los datos pasados ​​por el componente primario a través de this.props en el componente secundario

Si se pasa una variable

Si los accesorios necesitan tener valores predeterminados (pase, luego use pase, no pase, use el predeterminado)

Si el valor pasado requiere verificación del tipo de datos

cnpm i prop-types -D

(Después de la versión React v15.5, la verificación del tipo de datos se movió al paquete npm por separado para reducir el tamaño de la biblioteca central). Expansión de la


información en el momento de la redacción y verificación del componente de informe de errores

antes de reaccionar15.5

// 这段代码不要在编辑器编写，编写无效 -- react版本
var title = 'hello react';
var MyTitle = React.createClass({
    propTypes: {
        title: React.PropTypes.string.isRequired
    },
    render () {
        return (
            <div>{ this.props.title }</div>
        )
    }
})
ReactDOM.render(<MyTitle title={ tilte } />, document.getElementById('app'))

reaccionar a las reglas de validación completas

https://react.docschina.org/docs/typechecking-with-proptypes.html

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // 你可以将属性声明为 JS 原生类型，默认情况下
  // 这些属性都是可选的。
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // 任何可被渲染的元素（包括数字、字符串、元素或数组）
  // (或 Fragment) 也包含这些类型。
  optionalNode: PropTypes.node,

  // 一个 React 元素。
  optionalElement: PropTypes.element,

  // 一个 React 元素类型（即，MyComponent）。
  optionalElementType: PropTypes.elementType,

  // 你也可以声明 prop 为类的实例，这里使用
  // JS 的 instanceof 操作符。
  optionalMessage: PropTypes.instanceOf(Message),

  // 你可以让你的 prop 只能是特定的值，指定它为
  // 枚举类型。
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 一个对象可以是几种类型中的任意一个类型
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 可以指定一个数组由某一类型的元素组成
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 可以指定一个对象由某一类型的值组成
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // 可以指定一个对象由特定的类型值组成
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
  
  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),   

  // 你可以在任何 PropTypes 属性后面加上 `isRequired` ，确保
  // 这个 prop 没有被提供时，会打印警告信息。
  requiredFunc: PropTypes.func.isRequired,

  // 任意类型的数据
  requiredAny: PropTypes.any.isRequired,

  // 你可以指定一个自定义验证器。它在验证失败时应返回一个 Error 对象。
  // 请不要使用 `console.warn` 或抛出异常，因为这在 `onOfType` 中不会起作用。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // 你也可以提供一个自定义的 `arrayOf` 或 `objectOf` 验证器。
  // 它应该在验证失败时返回一个 Error 对象。
  // 验证器将验证数组或对象中的每个值。验证器的前两个参数
  // 第一个是数组或对象本身
  // 第二个是他们当前的键。
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })};

Manejo de eventos de reacción

El procesamiento de eventos del elemento reactivo es similar al elemento DOM, con una sintaxis un poco diferente

• El enlace del evento React se nombra en mayúsculas y minúsculas en lugar de minúsculas
• Si usa la sintaxis jsx, debe pasar una función como función de procesamiento de eventos en lugar de una cadena (escritura del elemento DOM)

JUICIO

<button onclick="fn()"></button>

Reaccionar

<button onClick={ this.fn }></button>
<button onClick={ () => {} }></button>

El constructor cambia esto: agregue un nuevo método a la instancia del componente

Cambie esto directamente a punto: no se agregará ningún método nuevo a la instancia del componente (recomendado)

Función entrante como función de controlador de eventos - (recomendado)

Parámetros de transferencia de eventos vinculantes

Pasar parámetros de objeto de evento

Pasar parámetros personalizados

Forma de reacción

Los elementos de formulario retienen algún estado interno

• Suponga que el componente de formulario está en un subcomponente

Debe pasar el controlador de eventos en el componente primario y pasarlo como una propiedad al componente secundario.
Encapsular la biblioteca de la interfaz de usuario: el componente del cuadro de entrada

Atributos	Descripción	Valor por defecto	Si se debe pasar
tipo	Tipo	'texto'	No
marcador de posición	Marcador de posición	''	No
valor	Ingrese el valor del cuadro	''	Si
error	Mensaje pronto	''	No
limpiable	Botón de borrar	falso	No

Eventos	Descripción	Valor por defecto	Si se debe pasar
onChange	Cambios en el valor del cuadro de entrada		Si

reaccionar versión TodoList

Formas y listas en un componente

import React from 'react'

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      username: '',
      list: []
    }
  }
  changeValue (event) {
    let username = this.state.username
    username = event.target.value 
    this.setState({
      username
    })
  }
  addlist () {
    let list = this.state.list
    list.push(this.state.username)
    this.setState({
      list
    })
  }
  delitem (index) {
    let list = this.state.list
    list.splice(index, 1)
    this.setState({
      list
    })
  }
  render () {
    return (
      <div className="box">
        <input type="text" value= { this.state.username } onChange= { this.changeValue.bind(this) }/>
        <button onClick={ this.addlist.bind(this) }>添加</button>
        <ul>
          { this.state.list.length > 0 ? this.state.list.map((item, index) => {
            return <li key={ index}> { item } <button onClick={ this.delitem.bind(this, index)}>删除</button></li>
          }) : ( <span>暂无数据</span>)}
        </ul>
      </div>
    )
  }
}

export default App

• Formulario en componente principal, lista en componente secundario