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:
- utilisateur, cliquez sur le chemin d'arborescence de gauche,
Explorer
obtenir ce chemin quecurrentPath
, puis passer àPathForm
, et de montrercurrentPath
en entrée -
utilisateur directement tapez un chemin d'accès à la
PathForm
s'entrée,PathForm
appelhandleSubmit
(Explorateur de fonction) pour modifier lacurrentPath
Supplémentaire:je veux garder
PathForm
comme un apatride en composant
Le problème:
- 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 parcurrentPath
. Mais si j'ai misvalue={currentPath}
, l'utilisateur ne peut pas taper quoi que ce soit d'autre. - 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 accessoirescurrentPath
passé parExplorer
- 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:
-
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 passerprops
ethandleSubmit
à 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 versformsy-react
-
formsy-react
- Il encore tant besoin de code, mais il fournir certains
mixin
, mais je dois encore écrire un texte personnalisé d'entrée avecchangeValue
fonction de moi-même(changeValue
est pas nécessaire dans la plupart des situation lors de l'écriture normalehtml jquery app
).Ensuite, j'ai trouvé le problème quiPathForm
ne peut pas utiliser des accessoirescurrentPath
passé parExplorer
...
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?
Vous devez vous connecter pour publier un commentaire.
Il y a
uncontrolled
(pas de valeur) etcontrolled
(valeur de consigne) entrée en reactjs.controlled
permettent pas la saisie de l'utilisateur, maisuncontrolled
n'.Solution:
uncontrolled input
(pas de valeur d'attribut).currentPath
changement.Mauvaise manière:
code:
Bon sens:
utilisation
componentWillReceiveProps
à l'ensemble des accessoires et de larel
pour sélectionner l'élément1.utiliser le formulaire soumettre
2.utilisez le bouton cliquez sur
Si vous ne voulez vraiment pas l'état dans Redux, vous pouvez au lieu de stocker l'état sur le composant avec
setState
. Accéder directement à l'entrée est fortement déconseillée. Vous devez suivre l'état de l'entrée sur le composant. Ajouter unonChange
gestionnaire à l'entrée, stocker l'état et de la poignéecomponentWillReceiveProps
où vous de décider quoi faire avec les nouveaux entrants, les accessoires.