How to change input value in redux
<p>I am making a file manager app based on react-redux, and I meet problem with <code>input</code>.</p>
<p>For example, my code:</p>
<p>PathForm.js:</p>
<pre><code>export default class PathForm extends Component {

  render() {

    const { currentPath,  handleSubmit } = this.props;
    console.log('PathFormPathFormPathForm', this.props)

    return (
      &lt;div className=&quot;path-box&quot;&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;div&gt;
            &lt;input type=&quot;text&quot; className=&quot;current-path-input&quot; placeholder=&quot;input path&quot;  value={currentPath} /&gt;
          &lt;/div&gt;
          &lt;button className=&quot;go-btn&quot; type=&quot;submit&quot;&gt;Go&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>
<p>Explorer.js:</p>
<pre><code>class Explorer extends Component {

  goPath(e) {
    e.preventDefault()
    // fake function here, because I have to solve the input problem first
    console.log('PathForm goPath:',this.props)
    let {targetPath , actions} = this.props
    swal(targetPath)
  }

  render() {
    const { node, currentPath , actions} = this.props
    console.log('Explorer.render:',this.props)

    return (
      &lt;div className='explorer-container'&gt;
        &lt;PathForm currentPath={currentPath} handleSubmit={this.goPath.bind(this)}/&gt;
        &lt;FileListOperator /&gt;
        &lt;FileListView fileList={node &amp;&amp; node.childNodes} actions ={actions} /&gt;
      &lt;/div&gt;
    );
  }
}


function mapStateToProps(state, ownProps) {
  return {
    node: state.tree[state.tree.currentPath],
    currentPath: state.tree.currentPath
  };
}

function mapDispatchToProps(dispatch) {
  console.log('mapDispatchToProps')
  return {
    actions: bindActionCreators(NodeActions, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Explorer);
</code></pre>
<p><strong>Feature I want:</strong></p>
<p>I have a <code>PathForm</code>, it need show path from two way:</p>
<ol>
<li><p>user click a file path from left tree view, <code>Explorer</code> get this path as <code>currentPath</code>, then pass to <code>PathForm</code>, and show <code>currentPath</code> in input</p>
</li>
<li><p>user directly type a path to the <code>PathForm</code>'s input,  <code>PathForm</code> call <code>handleSubmit</code>(Explorer's function) to change the <code>currentPath</code></p>
<p>Additional:I want to keep <code>PathForm</code> as a stateless component</p>
</li>
</ol>
<p><strong>The problem</strong>:</p>
<ol>
<li>I'd like use <code>PathForm</code> as a stateless form, so I don't want connect it to store, but I need it change input by <code>currentPath</code>. But if I set <code>value={currentPath}</code>, user can not type anything else.</li>
<li>change to <code>&lt;input type=&quot;text&quot; onChange={this.changeValue} value={this.getValue()}/&gt;</code> allow user type string in this input, but can not use props <code>currentPath</code> passed by <code>Explorer</code></li>
<li>The only way I can imagine is connect this form to store which I don't want. I'd like <code>Explorer</code> to dispatch all actions and pass props.</li>
</ol>
<hr />
<p><strong>Tried with some package</strong></p>
<p>I found the input not act as my thought, so I tried the two popular package:</p>
<ol>
<li><p><code>redux-form</code></p>
<p>It create a form need so much code, and official doc not say how to render this form with parent props,
I try to pass <code>props</code> and <code>handleSubmit</code> to it, not work. After I see
<a href="https://stackoverflow.com/questions/33237818/react-redux-whats-the-best-way-to-handle-crud-in-a-form-component/33393459#33393459">React + Redux - What&#39;s the best way to handle CRUD in a form component?</a>
and <a href="https://stackoverflow.com/questions/33138370/how-to-wire-up-redux-form-bindings-to-the-forms-inputs">How to wire up redux-form bindings to the form&#39;s inputs</a>
I found I can't do that, it define some function overwrite mine, this behave is not good for me(I have to change the handlerSubmit function name, but it still not work), and it connect to the store. So I turn to <code>formsy-react</code></p>
</li>
<li><p><code>formsy-react</code></p>
<p>It still need so much code, though it provide some <code>mixin</code>, but I still have to write a custom text input with <code>changeValue</code> function myself(<code>changeValue</code> is no need in most situation when writing normal <code>html jquery app</code>).Then I found the problem that <code>PathForm</code> can not use props <code>currentPath</code> passed by <code>Explorer</code>...</p>
</li>
</ol>
<p><strong>Probably Worked solution(but I don't tend to use):</strong></p>
<p>connect <code>PathForm</code> to store, add another state <code>inputPathValue</code> for this input. Use <code>inputPathValue</code> interact with <code>currentPath</code></p>
<hr />
<p>After above, I found use input/form is super in-convenient in react....
Does it mean I have to connect <code>PathForm</code> to stroe?
Any other way to solve my problem?</p>