Comment faire pour modifier la valeur d'entrée dans redux

Je fais une application gestionnaire de fichiers basé sur les réagissent-redux, et je rencontre des problème avec input.

Par exemple, mon code:

PathForm.js:

export default class PathForm extends Component {

  render() {

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

    return (
      <div className="path-box">
        <form onSubmit={handleSubmit}>
          <div>
            <input type="text" className="current-path-input" placeholder="input path"  value={currentPath} />
          </div>
          <button className="go-btn" type="submit">Go</button>
        </form>
      </div>
    );
  }
}

Explorer.js:

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 (
      <div className='explorer-container'>
        <PathForm currentPath={currentPath} handleSubmit={this.goPath.bind(this)}/>
        <FileListOperator />
        <FileListView fileList={node && node.childNodes} actions ={actions} />
      </div>
    );
  }
}


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);

Fonctionnalité que je veux:

J'ai un PathForm, est-il besoin de montrer le chemin à partir de deux façon:

  1. utilisateur, cliquez sur le chemin d'arborescence de gauche, Explorer obtenir ce chemin que currentPath, puis passer à PathForm, et de montrer currentPath en entrée
  2. utilisateur directement tapez un chemin d'accès à la PathForms'entrée, PathForm appel handleSubmit(Explorateur de fonction) pour modifier la currentPath

    Supplémentaire:je veux garder PathForm comme un apatride en composant

Le problème:

  1. J'aimerais utiliser PathForm comme un apatride en forme, donc je ne veux pas se connecter pour stocker, mais j'ai besoin de changer d'entrée par currentPath. Mais si j'ai mis value={currentPath}, l'utilisateur ne peut pas taper quoi que ce soit d'autre.
  2. changement de <input type="text" onChange={this.changeValue} value={this.getValue()}/> permettre à l'utilisateur de type chaîne de caractères dans cette entrée, mais vous ne pouvez pas utiliser des accessoires currentPath passé par Explorer
  3. La seule façon que je peux imaginer, c'est de connecter ce formulaire pour magasin que je ne veux pas. J'aimerais Explorer à l'expédition, toutes les actions et de transmettre les accessoires.

Essayé avec un paquet

J'ai trouvé l'entrée n'agissent pas comme ma pensée, j'ai donc essayé les deux populaire package:

  1. redux-form

    Il créer un formulaire tant besoin de code, et officiel doc dit pas comment rendre ce formulaire avec les parents des accessoires, des
    J'ai essayer de passer props et handleSubmit à elle, ne fonctionne pas. Après je vois
    Réagir + Redux - Quelle est la meilleure façon de gérer CRUD dans une forme de composant?
    et Comment câbler redux-forme des liaisons à la forme des entrées
    J'ai constaté que je ne peux pas faire ça, il définir une fonction remplacer le mien, ce comportement n'est pas bon pour moi(j'ai du modifier le handlerSubmit nom de la fonction, mais toujours pas de travail), et il se connecter à la boutique. Je me tourne donc vers formsy-react

  2. formsy-react

    - Il encore tant besoin de code, mais il fournir certains mixin, mais je dois encore écrire un texte personnalisé d'entrée avec changeValue fonction de moi-même(changeValue est pas nécessaire dans la plupart des situation lors de l'écriture normale html jquery app).Ensuite, j'ai trouvé le problème qui PathForm ne peut pas utiliser des accessoires currentPath passé par Explorer...

Probablement Travaillé solution(mais je n'ai pas tendance à utiliser):

connecter PathForm pour stocker, ajouter un autre état inputPathValue pour cette entrée. Utilisation inputPathValue interagir avec currentPath


Après ce qui précède, j'ai trouvé l'utilisation de l'entrée/la forme est super-pratique de réagir....
Signifie-t-il-je me connecter PathForm à stroe?
Tout autre moyen de résoudre mon problème?

InformationsquelleAutor Mithril | 2016-07-06