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

我一直在尝试通过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()获取值。）

任何建议将被认真考虑。

最佳答案

因此，您的SampleForm组件被Redux-Form包裹了。应该从作为处理程序的Container的onSubmit道具传递此经过修饰的组件。您正在传递handleSubmit（）作为道具，它与redux-form试图为您完成的handleSubmit“ middleware”冲突。

更改您的容器组件以传递“ 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>
        );
    }
}

现在，您的Container组件应正确接收参数“ values”作为参数，并且应该是表单字段键/值的对象。不需要调用event.preventDefault（），因为redux-form的中间件（正如我之前提到的）可以为您完成此操作。

因此，如下所示，将事件参数改为“ values”，而不是handleSubmit（event）：

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

关于javascript - Redux-如何在其提交处理程序中获取表单值并调用event.preventDefault()？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47247200/