This is the 9th day of my participation in the August More Text Challenge.

React parent and child components pass values

1. A search component realizes hidden display function by transferring values from parent and child components

1. Pass styles can be hidden by using display: None to search for subcomponents, which are accepted by props

 // In the parent component
 this.state = {
            searchComponentStyle: {
                display: 'none'
            }
        }
<SearchComponent pageStyle={this.state.searchComponentStyle}></SearchComponent>

// In the child component
 <div id='component-search' style={this.props.pageStyle}>
Copy the code

2. The child component invokes the method of the parent component to realize the function of transferring value to hide

// In the child component
 <div className="close-btn" onClick={this.props.changeStyle.bind(this.'none')}></div>
// In the parent component
 // Displays the hidden search component
    changeSearchComponentShow(style ='block') {
    
        this.setState({
            searchComponentStyle: {
                display: style
            }
        })
    }
  <div className="search-container" onClick={ this.changeSearchComponentShow.bind(this.'block')} ><div className="search-btn"></div>
                        <div className="search-holder">Please enter baby name</div>
                    </div>   
Copy the code

Use Ant-Mobile in React

1. Install NPM install ANTD-mobile –save

2. Introduce installation as required: NPM install babel-plugin-import –save-dev

2.1 Configuring Babel in package.json

"babel": {
    "presets": [
      "react-app"]."plugins": [["import",
        {
          "libraryName": "antd-mobile"."style": "css"}}]].Copy the code

2.2 Delete History using the Search component dialog box

import  {Modal} from 'antd-mobile'
<div className="delete-icon"  onClick={this.openConfirmDeleteDialog.bind(this)}></div>
 // Open the delete confirmation dialog box
    openConfirmDeleteDialog() {
        Modal.alert('Are you sure you want to delete it? '.' '[{text:'cancel'.onPress: () = > {}
            },{
                text:'confirm'.onPress: () = >{}},])}Copy the code

Modules use Redux

1. Review state management in VUEX:

Modules2 (mutation, state, actions, getters) State management in Readux: Eliminate state, getters, use Action and Reducers agents 3. Use redux’s data stream

// 1. Create actions and reducers directories under SRC, which can be divided into modules to facilitate the management of public data in the later stage

Copy the code

Minimal – grained redux sub – module demo

// 1. actions
// historyKeywords.js
function addHistoryKeyword(data) {
    console.log(data,'Actions to data.... ')
    return {
        type: 'addHistoryKeyword',
        data
    }
}

export  {
    addHistoryKeyword
}
// index.js
import * as historyKeywords from "./historyKeywords";

export default {
    historyKeywords
}

// 2. reducers
// historyKeywords.js
let historyKeywords = localStorage['historyKeywords']?JSON.parse(localStorage['historyKeywords'[]]) :function historyKeywordsReducer(state ={historyKeywords},action) {
    switch (action.type) {
        case 'addHistoryKeyword':
            console.log(state,'Old state')
            console.log(action, 'Reducers from the data... ')
            console.log(Object.assign({},state,action),'Later data')
            return   Object.assign({},state,action)
        default:
            return  state
    }
}

export default historyKeywordsReducer

// index.js
import {combineReducers} from "redux";
import historyKeywords from "./historyKeywords";

export default combineReducers({
    hkReducers:historyKeywords
})

// 3. Import file index.js
/*eslint-disable*/
import 'babel-polyfill';
import 'url-search-params-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import RouterComponent from './router';
import * as serviceWorker from './serviceWorker';
import "./assets/js/libs/zepto.js";
import "./assets/css/common/public.css";
import 'whatwg-fetch'
import {Provider} from "react-redux";
import {createStore} from "redux";
import Reducers from './reducers'

let store = createStore(Reducers)


class Index extends React.Component {
    render() {
        return (
            <React.Fragment>
                <Provider store={store}>
                    <RouterComponent />
                </Provider>
            </React.Fragment>
        )
    }
}

ReactDOM.render(<Index />.document.getElementById('root'));

serviceWorker.unregister();

// 4. Use it in business components
// search. Js component
import {connect} from "react-redux";
import actions from ".. /.. /actions";

constructor(props) {
this.historyKeywords = props.state.hkReducers.historyKeywords
}
 
 // Delete confirmation
onPress: () = > {
                    this.setState({
                        historyKeywordsShow: false
                    })
                   this.historyKeywords = []
                    this.props.dispatch(actions.historyKeywords.addHistoryKeyword({
                        historyKeywords: this.historyKeywords
                    }))
                    localStorage.removeItem('historyKeywords')}/ / add
  addHistoryKeywords() {
        if(!this.state.searchKeyword){
            return
        }
        let index  = this.historyKeywords.findIndex(v= > v === this.state.searchKeyword)
        if(index ! = = -1) {
            this.historyKeywords.splice(index,1)}this.historyKeywords.unshift(this.state.searchKeyword)
        this.props.dispatch(actions.historyKeywords.addHistoryKeyword({historyKeywords:this.historyKeywords }))
        localStorage.setItem('historyKeywords'.JSON.stringify(this.historyKeywords))
        if (!this.state.historyKeywordsShow) {
            this.setState({
                historyKeywordsShow: true}}})export default connect(state= > {
    console.log(state,'the state of the search... ')
    return {
        state:state
    }
})(SearchComponent)

Copy the code

Finally, react is not implemented like vue’s V-model

 <input type="text"  onChange={event= > {this.setState({searchKeyword: event.target.value.trim()})}} />
Copy the code