Question

我一直在尝试将带有Redux-Form的表单中的值传递给带有event.preventDefault（）的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

因此，您将SampleForm组件包装为Redux-Form。这个装饰组件应该从您的Container传递一个onSubmit prop，它是处理程序。你正在传递handleSubmit（）作为一个与redux-form的handleSubmit“中间件”冲突的道具，它试图为你做。

更改您的Container组件以传递“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的中间件（如前所述）为你做了。

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

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

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

1 个答案: