forgeplus-react/src/modules/test/md/TestMaterialDesign.js

import React, { Component } from 'react';

import { IIHOC as DebuggerHOC, stringify } from './ii_debug'

// Props Proxy and state abstraction demonstration
function PPHOC(WrappedComponent) {
  return class PP extends React.Component {
    componentDidMount() {
      // console.log('componentDidMount1 componentDidMount1 ')
    }
    constructor(props) {
      super(props)
      this.state = { fields: {} }
    }

    getField(fieldName) {
      if (!this.state.fields[fieldName]) {
        // TODO 从服务端取state对应的数据
        // 共享state
        this.state.fields[fieldName] = {
          value: '',
          onChange: event => {
            this.state.fields[fieldName].value = event.target.value
            this.forceUpdate()
          }
        }
      }

      return {
        value: this.state.fields[fieldName].value,
        onChange: this.state.fields[fieldName].onChange
      }
    }

    render() {
      const props = Object.assign({}, this.props, {
        fields: this.getField.bind(this),
      })
      return (
        <div>
          <h2>
            PP HOC
          </h2>
          <p>Im a Props Proxy HOC that abstracts controlled inputs</p>
          <WrappedComponent {...props} />
        </div>
      )
    }
  }
}

class Example extends React.Component {
  componentDidMount() {
    console.log('componentDidMount componentDidMount ')
  }
  render() {
    return (
      <div>
        <h2>
          Wrapped Component
        </h2>
        <p>
          Props
        </p>
        <pre>{stringify(this.props)}</pre>
        <form>
          <label>Automatically controlled input!</label>
          <input type="email" {...this.props.fields('email')} />
        </form>
      </div>
    )
  }
}

const EnhancedExample = DebuggerHOC(PPHOC(Example))

export default EnhancedExample