javascript - Redux - 如何在其提交处理程序中获取表单值并调用 event.preventDefault()？

Question

我一直在尝试使用 event.preventDefault() 将值从带有 Redux-Form 的表单传递到其 handleSubmit ，以便提交此表单获胜不要更改 URL。

这很可能与 react-router 有关。

以下是我的尝试的摘录...

//form
class SampleForm extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {      
        return (
          <div>
            <form onSubmit={this.props.handleSubmit}>                   
                <Field name="body" component="textarea" />
                <button type="submit" className="btn">Save</button>
            </form>
          </div>
        );
    }
}

//container...
class Container extends React.Component {
    handleSubmit(event) {        
        event.preventDefault();
        //How can I get the values from SampleForm?
    }

    render() {
        return (
            <div>
                <SampleForm handleSubmit={this.handleSubmit}/>
            </div>
        );
    }
}

我正在使用react-router。因此，当我提交表单时，URL 将使用提交的值进行更新。

(当我没有使用 react-router 时，这种情况不会发生 - 我可以简单地从 handleSubmit() 获取值。)

如有任何建议，我们将不胜感激。

Answer 1

因此，您已经用 Redux-Form 包装了 SampleForm 组件。这个装饰组件应该从您的容器(即处理程序)传递一个 onSubmit 属性。您将handleSubmit()作为 Prop 传递，这与它试图为您做的redux-form的handleSubmit“中间件”相冲突。

更改容器组件以传递“onSubmit”来代替“handleSubmit”，如下所示:

//container...
class Container extends React.Component {
    handleSubmit(event) {        
        event.preventDefault();
        //How can I get the values from SampleForm?
    }

    render() {
        return (
            <div>
                <SampleForm onSubmit={this.handleSubmit}/>
            </div>
        );
    }
}

现在，您的容器组件应该正确接收参数“值”作为参数，并且应该是表单字段键/值的对象。不需要调用 event.preventDefault() 因为 redux-form 的中间件(正如我之前提到的)会为你做到这一点。

因此，不要将handleSubmit(event)更改为“values”，如下所示:

handleSubmit(values) {        
    console.log(values);
}