如何在redux-form的<Field>中有条件地渲染组件
阿比纳夫·基纳吉
在我的代码中，试图通过名为的函数呈现Redux Form的<DatePicker>in<Field>组件renderDatePicker()。此函数链接到handleClick()状态变量isOpen设置为的函数true。
因此，理想情况下，onClick应渲染<DatePicker>设置为可见的。但是代码不会更新任何内容。我在哪里做错了？
注意：<DatePicker>直接在无需的帮助下进行渲染<Field component=...>，效果很好。
对于调试，完整的代码位于CodeSandbox中，
SimpleForm.js
import React from "react";
import { reduxForm } from "redux-form";
import { Field } from "redux-form";
import DatePicker from "react-mobile-datepicker";
class SimpleForm extends React.Component {
constructor(props) {
super(props);
this.state = {
time: new Date(),
isOpen: false
};
this.handleClick = this.handleClick.bind(this);
}
renderDatePicker = () => (
<DatePicker
value={this.state.time}
isOpen={this.state.isOpen}
onSelect={this.handleSelect}
onCancel={this.handleCancel}
/>
);
handleClick() {
this.setState({ isOpen: true }, function() {
console.log(this.state.isOpen);
});
}
handleCancel = () => {
this.setState({ isOpen: false });
};
handleSelect = time => {
this.setState({ time, isOpen: false });
};
render() {
return (
<div>
<button className="select-btn" onClick={this.handleClick}>
select time
</button>
<Field
name="date"
type="date"
component={this.renderDatePicker}
label={"date"}
/>
</div>
);
}
}
export default reduxForm({
form: "simple" // a unique identifier for this form
})(SimpleForm);
数字育种
此行为的原因在于react-formField组件的实现。它会对其所有属性进行浅表比较，以决定是否应重新渲染。您可以随意更改组件的名称state，对它的引用this.renderDatePicker不会更改。
Field将属性（包括onChange处理程序和当前属性）传递value到该字段的component无状态函数调用中以通知更改，但这在这里并不适用，因为您的切换按钮不在该字段之外。
因此，我想到的一种选择是将您的按钮移至渲染字段中，然后调用onChange(!value)。
一个更简单但更肮脏的选择是在component属性中使用箭头功能：component={() => this.renderDatePicker()}-此实例随着您的每次重新渲染而更改SimpleForm（即，如果state更改），因此会带来成本，但是取决于应用程序的复杂性，成本可忽略不计。为了减轻影响，您可以实施shouldComponentUpdate（就像redux-formField一样）根据当前isOpen状态和下一个状态决定是否应重新呈现。
在redux格式中检查此位以获取更多详细信息：https : //github.com/erikras/redux-form/blob/master/src/createField.js#L44
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在useEffect中更新状态的条件组件中有条件地渲染？
- 2
如何在Angular中有条件地渲染？
- 3
如何有条件地渲染原因反应组件？
- 4
如何有条件地渲染 Angular 组件
- 5
如何在Vuejs中有条件地渲染屏幕？
- 6
如何在 Vue.js 中有条件地渲染元素？
- 7
如何有条件地渲染
- 8
如何在React中有条件地将布局应用于组件
- 9
如何在无状态组件中有条件地更新状态？
- 10
如何在Json Schema中有条件地添加Required Field使其同级json元素的json元素宽度子元素占位？
- 11
如何在Excel中有条件地匹配
- 12
如何在Excel中有条件地VLOOKUP？
- 13
如何在一个 redux-form Field 组件中关联多个组件？
- 14
如何在有条件的js中有条件地应用标题
- 15
如何在React中有条件地将子组件添加到父组件？
- 16
如何在另一个组件中有条件地添加组件
- 17
如何有条件地渲染使用钩子的React组件
- 18
有条件地渲染JSX的React组件的更新周期如何表现？
- 19
如何有条件地渲染两个组件？
- 20
如何在有条件的组件上有条件地添加道具？
- 21
如何在React Native中有条件地从三个不同的选项进行渲染？
- 22
如何在“组件”页面中有条件地设置第一个InstType
- 23
如何在自定义对话框中有条件地显示某些组件？
- 24
如何有条件地渲染来自API的响应
- 25
语义 UI React：如何有条件地将 Form.Input 设置为 readOnly
- 26
如何有条件地包装React组件？
- 27
如何有条件地向组件添加文本？
- 28
在 React 组件中有条件地渲染 <td>
- 29
如何在R中的数据框中有条件地选择列
我来说两句