Where to save text input state with presentation and container components?

Question

Using the presentation and container components that Dan Abramov previously discussed , I have a presentation component that has an input and a button and a container component that processes the text specified at the input and sends an event when the select button is pressed.

Presentation component:

import React from 'react'

const NavBar = ({ onClick, handleChange }) => {
    return (
        <div className="NavBar">         
            <input onChange={handleChange} />
            <button type="submit" onClick={onClick}>Search</button>
        </div>
    )
}

export default NavBar

Container component:

import {connect} from 'react-redux'
import NavBar from '../components/NavBar'
import {requestStat} from '../../stats/actions/StatsAction'

// meh, not a big fan of this, but I think it the right compromise for handling the textinput.
let textInput

const mapDispatchToProps = (dispatch) => ({
    handleChange: (e) => textInput = e.target.value,
    onClick : (e) => handleSelectedTab(dispatch)    
})

const handleSelectedTab = (dispatch) => {
    if (textInput != null && textInput != "") {
        dispatch(requestStat(textInput))
    }
}

const NavBarContainer = connect(null, mapDispatchToProps)(NavBar)

I am wondering where it is better to store the input string?

In my current solution, I save this state as in the textInput variable of the container component - is this the best place for it with this current setting?

, submit, . , , , , , handleChange , natural unit test :

export default NavBarContainer

import React from 'react'
import {shallow} from 'enzyme'
import Navbar from './Navbar'


describe('NavBar', () =>{

    it ('run callback when input changed, setting value to true', () => {

        let change = false
        const handleChange = () => { change = true; }

        const props = { handleChange }
        const component = shallow(<Navbar {...props} />)

        expect(change).toBe(false)

        const formGroup = component.find('input')
        formGroup.simulate('change')

        expect(change).toBe(true)
    })
})

/ !

EDIT:

; , , , - .

, submit, , , , -, .

2:

, , .

Answer 1

, , , .

, , . , , , , , . , , .

, , , , . . , , , . .

, , . , .

Answer 2

redux . store mapStateToProps connect().

mapStateToProps = ( state ) = > {
    return {
        inutText: state.inputText
    }
}

const NavBarContainer = connect(mapStateToProps, mapDispatchToProps)(NavBar);

NavBar .

: ,

- , - . , . , , . , redux, . .

№ 2:

. , , , . , . .

, State , , , .

, .

import React, { PureComponent } from "react";
import {connect} from 'react-redux';
import NavBar from '../components/NavBar';
import {requestStat} from '../../stats/actions/StatsAction';

class navBar extends PureComponent {
    constructor( props ) {
        super( props );

        this.state = {
            textInput: props.textInput || ""
        }

        this.handleSelectedTab = this.handleSelectedTab.bind( this );
        this.handleChange = this.handleChange.bind( this );
    }

    handleSelectedTab() {
        // I don't see where you use this

        // dispatch is available here.
        // this.props.dispatch
    }

    handleChange( e ) {
        // handle change
    }

    render() {
        const { textInput } = this.state;
        return (
            <NavBar onClick={ this.handleSelectedTab } handleChange={ this.handleChange } value={ textInput } />
        );
    }
}

const NavBarContainer = connect()(navBar);

export default NavBarContainer;

, , . .

Answer 3

React , React with Redux , Redux.

To do this, you will need to configure some action creators and reducers. Take a look at the TodoList example application for an example of what I'm talking about. Typically, you should use an action file to write simple functions that are passed as the props of your presentation components through the components of your container.

UPDATED ON THE BASIS OF COMMENT:

You can use something like

import React, { PropTypes } from 'react'

class NavBar extends React.Component {
    static propTypes = { onClick: PropTypes.func.isRequired }
    handleChange = (e) => this.setState({inputValue: e.target.value})
    onClick = (e) => this.props.onClick(this.state.inputValue)
    render(){
       return (
         <div className="NavBar">         
          <input onChange={handleChange} />
          <button type="submit" onClick={onClick}>Search</button>
         </div>
       )
     }
}

export default NavBar