相关疑难解决方法(0)

我有一个用于创建,读取,更新和删除的表单.我创建了3个具有相同形式的组件,但我传递了不同的道具.我有CreateForm.js,ViewForm.js(只读取删除按钮)和UpdateForm.js.

我曾经使用PHP,所以我总是以一种形式做这些.

我使用React和Redux来管理商店.

当我在CreateForm组件中时,我传递给我的子组件,这个props createForm={true}不会用值填充输入,也不会禁用它们.在我的ViewForm组件中,我传递了这个道具readonly="readonly".

我有一个textarea的另一个问题,它充满了一个值,并且不可更新.具有值的react textarea是readonly但需要更新

只有一个组件可以处理这些不同的表单状态,最好的结构是什么？

你有任何建议,教程,视频,演示分享？

redux-form是一个非常引人注目的库,用于在反应应用程序中为表单提供redux绑定,这应该是非常方便的.不幸的是,使用库自己的例子,我实际上没有绑定任何东西,这非常方便.

我试图利用项目网站上的示例代码,并发现多个障碍,尽管试图忠实地再现它.我在哪里误解了这个API？自编写演示代码以来API是否已移位？我错过了一些关键且明显的redux知识吗？

问题1:handleSubmit方法的签名应该是handleSubmit(data).但handleSubmit目前只接收来自提交操作的React syntheticEvent,而且没有数据.(实际上,使用as-written的示例是发送两个单独的事件,似乎是因为onSubmit表单上的堆叠操作和onClick按钮上的.)数据应该来自哪里,为什么我没有通过它处理程序？

问题2:fields必须在父表单上定义一个关键对象,并将其作为表单的prop提供.不幸的是,该fields对象的形状在文档中没有解释,也没有在目的中解释.它本质上是最初的"状态"对象吗？redux-form的简单对象容器在运行时用于出错等？我已经通过将道具匹配fields到字段名称来阻止错误connectReduxForm,但因为数据没有绑定,我假设它不是正确的形状.

问题3:字段应该是自动绑定到处理程序onBlur和onChange,让他们适当地更新存储.那永远不会发生.(我们可以看到感谢Redux开发工具.但是,handleSubmit成功调度了这个initialize动作,这表明存储,减速器和其他基本管道都在工作.)

问题4:validateContact在init上触发一次,但从未再次触发.

遗憾的是,这对于一个简单的小提琴来说太复杂了,但整个仓库(它只是基本的ReduxStarterApp,再加上这种形式的POC)可以在这里找到.

而且,这是外部组件:

import React       from 'react';
import { connect } from 'react-redux';
import {initialize} from 'redux-form';

import ContactForm from '../components/simple-form/SimpleForm.js';

const mapStateToProps = (state) => ({
  counter : state.counter
});
export class HomeView extends React.Component {
  static propTypes = {
    dispatch : …