我有一个redux-form连接到我的应用程序状态,一切似乎都很好.我可以获取数据并将其加载到我的表单中,然后提交数据并获取我想要的元数据...
但是,我有一个自定义交互(颜色选择器),需要动态更改托管字段的值.我尝试的所有内容都会改变屏幕,但不会改变redux格式状态,即当我提交表单时,我只获取原始字段数据而不是表单中显示的新数据.
下面的版本是将字段props传递给组件并尝试使用ColorSelect组件状态作为字段值.我也试过创建一个动作创建者,但是同样的结果和更多的代码,这个例子......
注:react@^15.4.2,react-redux @^5.0.2,redux-form @^6.4.3
...
import ColorSelect from './ColorSelect';
class CollectionForm extends Component {
/**
* On form submit accepted
* @param values
*/
onSubmit(values){
//See screenshot for evidence
log('Updating collection:', 'warn', values);
//values.color is grey and not yellow!
this.props.dispatch(updateCollection(values));
return;
}
/**
* Form render
* @return {JSX}
*/
render()
{
const { handleSubmit, submitting } = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<Field component={renderTextInput} name="name" type="text" label="Name"/>
<Field component={ColorSelect} name="color" />
<div class="field-buttons right-align group">
<Button …我想将数据从我的状态传递给提取调用（例如搜索字词）。状态更改时，应该重新获取我的数据。
生命周期方法似乎是执行此操作的地方，但是当我使用它们时，它要么不执行任何操作（在状态更改之前调用渲染），要么进行无休止的循环。
这是我的简化代码：
@connect((store) => {
return {
collections : store.collections.collections
}
}, {
fetchCollections
})
export default class CollectionPane extends Component {
constructor(props){
super(props);
this.state = {
term : null
}
}
componentWillMount(){
this.handleFetchCollections(this.state.term); // This loads initial ok
}
componentDidUpdate(){
// this.handleFetchCollections(this.state.term); // This causes loop
}
handleFetchCollections(props, sort){
log('Fetching...', 'green');
this.props.fetchCollections(props, sort);
}
onSearch(){
const term = "test example";
this.setState({
term
})
}
render(){
const { collections } = this.props;
return (
<div>
<a style={{ display: "block", …