我正在调度一个动作,该动作运行一个reducer,在表单提交时将一些文本推送到我的redux状态。我知道在Vue你可以在DOM中preventDefault
,但我没有在React中看到任何可能使这看起来成为可能的东西。
我想知道阻止表单提交的最佳方法,因此Redux可以做到这一点。我的代码如下。谢谢!
动作/ index.js
export function addLink(text) {
return {
type: 'ADD_LINK',
text
}
}
reducers / 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;
components / LinkInput.js(这是我在onSubmit上发送动作的地方)
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>
);
}
}
导出默认LinkInput;
答案 0 :(得分:5)
我要做的是在你的组件中定义一个名为_onSubmit
的函数,让它像这样:
_onSubmit(e) {
e.preventDefault();
this.props.data.addLink(this.state.text)
}
然后您的表单组件只使用this._onSubmit
作为其onSubmit
处理程序
<form className="form form-inline" onSubmit={this._onSubmit} style={styles.form}>
这将处理事件并发送正确的操作。