redux-form：将 _id 与 formProps 一起传递给提交处理程序

Question

我正在为我的 CRUD 应用构建一个编辑按钮。在此组件中，每个个体 'rating' 都映射到这些组件之一。该组件开始显示存储在数据库中的评级，但用户可以按下编辑按钮，它会变成一个表单！（最终，我将获得初始值以使用备用呈现选项中显示的数据填充表单字段）。

现在对于编辑按钮，我有一个自定义提交处理程序接收来自两个表单字段的提交数据 'formProps'。然而，在将这些传递给后端 API 之前，我还需要弄清楚如何将 id 或其他东西绑定到提交处理程序。

正如在表单正下方的组件中所见，整个子组件都可以访问从父组件传下来的必要组件，这些组件可以作为 'this.props.id' 进行访问。无论如何，在 handleSubmit 将其全部带到 Redux Actions 之前，是否可以将 'this.props.id' 与 formProps 捆绑在一起？

class Rating extends Component{
constructor(props){
    super(props);
    this.state = {
        formClass: "notShowing",
        ratingClass: "showing"
    }
  }

renderForm = () => {
this.state.formClass === "notShowing"
? this.setState({formClass: "showing", ratingClass: "notShowing"})
: this.setState({formClass: "notShowing", ratingClass: "showing"})
}

onSubmit = (formProps) => {
    console.log("this is what the submitHandler recieves;", formProps);
    this.props.editRating(formProps, () => {
      this.props.history.push('/userDashboard');
    });
  }

render() {
    const { handleSubmit, reset } = this.props;
    return (
        <div className="card darken-1" key={this.props._id}>
            <div className={this.state.formClass}>
                <form onSubmit={handleSubmit(this.onSubmit)}> 
                    <p>What are you rating?</p>
                    <fieldset>
                    <Field
                        name="title"
                        type="text"
                        component="input"
                        autoComplete="none"
                    />
                    <p>Add your rates!</p>
                    <Field
                        name="value"
                        type="number"
                        component="input"
                        autoComplete="none"
                    />
                    </fieldset>
                    <button onClick={this.renderForm} type="submit" className="teal btn-flat right white-text">Submit</button>
                </form>
                <button onClick={this.renderForm}>Cancel</button>
            </div>    
            <div className={this.state.ratingClass}>
                <div className="card-content">
                <span className="card-title">{this.props.title}</span>
                <p>{this.props.value}</p>
                <button onClick={this.renderForm}>Edit</button>
                <button onClick={() => this.props.deleteRating(this.props.id)}>Delete</button>
                </div >    
            </div>
        </div>
    );
  }
}

function mapStateToProps({ratings}) {
  return { ratings };
} 

export default compose(
  connect(mapStateToProps, actions),
  reduxForm({ form: 'editRating' })
)(Rating);

Answer 1

可以使用handleSubmit函数的第三个参数。

onSubmit = (values, _, props) => {
    console.log(values, props.id);
    ...
}
...
const { handleSubmit, reset } = this.props;
<form onSubmit={handleSubmit(this.onSubmit)} .../>

参考：https://redux-form.com/7.4.2/docs/api/reduxform.md/#-code-onsubmit-function-code-optional-

redux-form：将 _id 与 formProps 一起传递给提交处理程序

redux-form: Passing an _id to the submit handler along with formProps

reactjs

redux

redux-form

onsubmit

react-props