我正在调度一个运行reducer的操作,该操作将表单提交中的某些文本推送到我的redux状态。我知道在Vue中,你可以在DOM中使用preventDefault
,但是我还没有看到React中的任何东西可以让这看起来成为可能。在React/Redux中调度动作时,有没有一种很好的方法可以防止默认?
我想知道防止表单提交的最好方法,所以Redux可以做到这一点。我的代码如下。谢谢!
动作/ index.js
export function addLink(text) {
return {
type: 'ADD_LINK',
text
}
}
减速器/ index.js(ADD_LINK)的功能我跑
/*eslint-disable*/
export function linkList(state = [], action) {
switch(action.type) {
case 'ADD_LINK':
var text = action.text;
console.log('Adding link');
console.log(text);
return {
...state,
links: [text, ...state.links]
};
case 'DELETE_LINK':
var index = action.index;
console.log('Deleting link');
return {
...state,
links: [
...state.links.slice(0, index),
...state.links.slice(index + 1)
],
};
case 'UPDATE_LINK':
var index = action.index;
var newText = action.newText;
console.log(action.newText);
console.log(action.index);
return {
...state,
links: [
...state.links.slice(0, index),
newText,
...state.links.slice(index + 1)
],
}
default:
return state;
}
};
export default linkList;
组件/ LinkInput.js(这里是我派遣action on提交)
import React, { Component } from 'react';
class LinkInput extends Component {
constructor(props) {
super(props);
this.state = {
text: '',
};
}
handleChange(e) {
e.preventDefault();
this.setState({
text: e.target.value
});
}
render() {
return (
<form className="form form-inline" onSubmit={this.props.data.addLink.bind(null, this.state.text)} style={styles.form}>
<div className="form-group">
<label className="label" htmlFor="exampleInputName2" style={styles.label}>Add a link: </label>
<input type="text" className="input form-control" onChange={this.handleChange.bind(this)} style={styles.input}/>
</div>
<button type="submit" className="button btn btn-primary" style={styles.button}>Add link</button>
</form>
);
}
}
export default LinkInput;
你这样做的方式是正确的。 –
在onSubmit上使用你自己的处理程序,并在e.preventDefault()之后调用addLink。 –