So ändern Sie die input-Wert in redux

Bin ich eine Datei-manager-app auf Basis reagieren-redux, und ich treffe problem mit input.

Zum Beispiel mein 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);

Funktion, die ich will:

Ich habe eine PathForm müssen es zeigen, Weg von der zwei-Wege -:

1. Benutzer klicken Sie auf einen Datei-Pfad vom linken Baum-Ansicht Explorer bekommen Sie diesen Pfad currentPath, dann pass auf PathForm, und zeigen currentPath im Eingang
2. Benutzer auch direkt geben Sie einen Pfad zu der PathForm's input, PathForm nennen handleSubmit(Explorer-Funktion) , ändern Sie die currentPath

   Zusätzliche:ich will PathForm als eine stateless Komponente

Das problem:

1. Würde ich gerne verwenden PathForm als Staatenlose form, so dass ich nicht wollen, verbinden Sie es zu speichern, aber ich brauche es die Eingabe ändern, indem currentPath. Aber wenn ich value={currentPath}, kann der Benutzer nicht geben Sie nichts anderes.
2. änderung <input type="text" onChange={this.changeValue} value={this.getValue()}/> Benutzer erlauben, den Typ string, in diesem Eingang, aber nicht verwenden können, Requisiten currentPath übergeben Explorer
3. Die einzige Möglichkeit die ich mir vorstellen kann ist, schließen Sie dieses Formular, um zu speichern, welche ich nicht will. Ich möchte Explorer bis zum Versand alle Aktionen und pass Requisiten.

---

Versucht mit einem Paket

Fand ich den Eingang nicht als mein Gedanke, also habe ich versucht die beiden beliebten Paket:

1. redux-form

   Es ein Formular erstellen, muss so viel code, und die offizielle doc nicht sagen, wie die zum Rendern dieser form mit den Eltern Requisiten,
   Ich versuche zu pass props und handleSubmit zu Ihr, nicht zu arbeiten. Nachdem ich sehen
   Reagieren + Redux - Was ist der beste Weg zu handhaben CRUD-in einer form-Komponente?
   und Wie zu verdrahten redux-form Bindungen an die Formular-Eingaben
   Ich fand, ich kann das nicht tun, Sie definieren eine Funktion überschreiben Sie mir, dieses Verhalten ist nicht gut für mich(ich habe zum ändern der handlerSubmit name der Funktion, aber es immer noch nicht funktionieren), und es eine Verbindung zu den speichern. So Wende ich mich formsy-react

2. formsy-react

   Müssen noch so viel code, obwohl es einige mixin, aber ich habe noch so schreiben Sie einen benutzerdefinierten text-Eingabe mit changeValue Funktion selbst(changeValue ist keine Notwendigkeit in den meisten situation, wenn das schreiben normal html jquery app).Dann fand ich das problem, dass PathForm nicht verwenden können, Requisiten currentPath übergeben Explorer...

Arbeitete wahrscheinlich die Lösung(aber ich glaube nicht, neigen dazu, Sie zu nutzen):

verbinden PathForm zu speichern, fügen Sie einem anderen Staat inputPathValue für diesen Eingang. Verwenden inputPathValue interagieren mit currentPath

---

Nach oben, fand ich verwenden-input - /form ist super-bequem in der reagieren....
Bedeutet das, ich muss zu verbinden PathForm zu stroe?
Eine andere Möglichkeit, um mein problem zu lösen?

InformationsquelleAutor Mithril | 2016-07-06